//使用文件预览的原因是：TMD微信浏览器屏蔽掉文件下载链接，只好折中使用文件在线预览功能
//要点：1.office文件用微软的插件打开 http://view.officeapps.live.com/op/view.aspx?src=“office文件地址（如http://oss.aliyun.com/xxx.word 、\xxx.xlsx）”
//     2.txt、pdf文件用 pdf.js 插件实现在线预览 嵌套在layer显示（本人的前端烂的一匹）
//     3.图片文件 也用layer显示
//     pdf.js下载地址https://files.cnblogs.com/files/indifferent/pdf.js ； pdf.worker.js下载地址：https://files.cnblogs.com/files/indifferent/pdf.worker.js
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>项目详情</title>

        <link rel="icon" type="image/x-icon" href="https://erun.oss-cn-shenzhen.aliyuncs.com/images/system/config/website/favicon_0.jpg">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        {link href="@web/css/bid/public.css"}

        <style>

            .downloadFile{

                margin-top: 20px;

                    padding-left: 5px;

            }

            .downloadFile ul{

                padding: 0;

                margin:0;

                margin-top: 10px;

                list-style: none;

            }

            .downloadFile li{

                color:blue;

                text-decoration: underline;

                margin-bottom: 5px

            }

            .pdfobject-container {

                height: 30rem; border: 1rem solid rgba(0,0,0,.1);

            }

            .lightbox{

            position: fixed;

            top: 0px;

            left: 0px;

            height: 100%;

            width: 100%;

            z-index: 7;

            opacity: 0.3;

            display: block;

            background-color: rgb(0, 0, 0);

            display: none;

        }

        .pop,iframe{

            position: absolute;

            /*left: 50%;*/

            top:0;

            /*width: 100%;*/

            width: 100%;

            height: 100%;

            /*margin-left: -446.5px;*/

            z-index: 9;

        }

        </style>

    </head>

    <body>

        <div class="zbDetail">

            <p>{$info.obj_name}</p>

            <div class="company">{$info.company}</div>

            <div class="other">

                <span>{strstr($info.address,',',-1)}</span>

                <div class="time">

                    <img src="../../images/bid/clock.png">

                    <div> 截止 {date('Y-m-d',$info.endtime)}</div>

                </div>

            </div>

            <div class="hr"></div>

            <div class="title">

                项目介绍

            </div>

            {*<div class="otherItem">规模：人民币2757529.19元</div>*}

            <div class="otherItem">{$info.synopsis}</div>

            <div class="hr"></div>

            <div class="title">

                招标要求

            </div>

            <div class="otherItem">

                {$info.demand}

            </div>

            {if $info.attachmentItem neq ''}

            <div class="downloadFile">

                <p >附件下载</p>

                    <ul class="uploadFileSource" >

                      {foreach from=$info.attachmentItem item=item key=key}

                        <li >

                            <!-- <a class="fileview" data-url="{$item[0]}" href="http://view.officeapps.live.com/op/view.aspx?src={$item[0]}" download="{$item[1]}">{$item[1]}</a> -->

                            <a class="fileview" data-id="file{$key}" data-url="{$item[0]}" href="javascript:void(0)" download="{$item[1]}">{$item[1]}</a>

                        </li>

                      {/foreach}

                   </ul>

            </div>

            {/if}

            </div>

            <a class="goSub" href="./form.html?id={$info.id}">我要投标</a>

        </div>

    </body>

</html>

{script src='@web/js/jquery-1.9.1.min.js'}

{script src='@web/js/pdf.js'}

{script src='@web/js/pdf.worker.js'}

<script type="text/javascript">

        function showPdf(isShow) {

            var state = "";

            if (isShow) {

                state = "block";

            } else {

                state = "none";

            }

            var pop = document.getElementById("pop");

            pop.style.display = state;

            var lightbox = document.getElementById("lightbox");

            lightbox.style.display = state;

        }

        function close(ele){

            // showPdf(false)

            ele.onclick = function(){

                showPdf(false);

            }

        }

</script>

<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

<script type="text/javascript">

    $().ready(function(){

        function show(id){

            console.log('dsd')

            // var temp = $('#'+id).contents().("#plugin");

            // console.log(temp.attr('name'))

            $('#'+id).onclick=function(){

                console.log('hlslfs')

                if($('#pop').css('display')=='block'){

                    $('#'+id).css('display', 'none');

                }

            }

        }

        $('.fileview').click(function(){

            var dataurl = $(this).attr('data-url')

            var attr = dataurl.split('.');

            var name = dataurl.split('/');

            if(attr[attr.length-1] == 'doc'|| attr[attr.length-1] == 'docx'|| attr[attr.length-1] == 'docm'|| attr[attr.length-1] == 'dotx' || attr[attr.length-1] == 'dotm' || attr[attr.length-1] == 'xls'|| attr[attr.length-1] == 'xlsx'|| attr[attr.length-1] == 'xlsm'|| attr[attr.length-1] == 'xltx'|| attr[attr.length-1] == 'xltm'|| attr[attr.length-1] == 'xlsb'|| attr[attr.length-1] == 'xlam' || attr[attr.length-1] == 'ppt' || attr[attr.length-1] == 'pptx'|| attr[attr.length-1] == 'pptm'|| attr[attr.length-1] == 'ppsx'|| attr[attr.length-1] == 'ppsm'|| attr[attr.length-1] == 'potx'|| attr[attr.length-1] == 'potm'|| attr[attr.length-1] == 'ppam'){

                alert

                window.location.href = 'http://view.officeapps.live.com/op/view.aspx?src='+dataurl;

            }else if(attr[attr.length-1] == 'pdf' || attr[attr.length-1] == 'PDF'|| attr[attr.length-1] == 'txt'){

                layer.open({

                  type: 1,

                  maxmin: true,

                  area: ['100%', '100%'],

                  shadeClose: true, //点击遮罩关闭

                  content: "<iframe src='"+dataurl+"' frameborder='0' id='"+$(this).attr('data-id')+"' name='pdfContainer'></iframe>"

                });

            }else if(attr[attr.length-1] != 'txt'){

                var photo = [];//创建对象

                var photosJSON = {

                    title: "图片信息",

                    id: "0",

                    start: 0,

                    data: [{

                        'src':dataurl,

                        'pid':0,

                        'alt':name[name.length-1],

                        'thumb':''

                    }]

                }

                // console.log(photosJSON);

    //             //相册层

                // // $.getJSON('test/photos.json?v='+new Date, function(json){

                  layer.photos({

                    photos: photosJSON //格式见API文档手册页

                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机

                  });

                // });

            }

        });

    });

    var plugin = window.top.document.getElementById("plugin");

    if(plugin != null){

        plugin.onclick = function(){

            close()

        }

    }

    $('#pop').onclick= function(){

        console.log('dsdsd')

        close();

    }

</script>

<script type="text/javascript">

</script>

浏览器在线预览pdf、txt、office文件的更多相关文章

  1. Java实现word文档在线预览，读取office文件

    想要实现word或者其他office文件的在线预览,大部分都是用的两种方式,一种是使用openoffice转换之后再通过其他插件预览,还有一种方式就是通过POI读取内容然后预览. 一.使用openof ...

  2. JAVAWeb项目实现在线预览、打开office文件

    Web项目实现在线预览浏览word.ppt.excel文档方法 调用以下链接 https://view.officeapps.live.com/op/view.aspx?src=你的文档绝对路径 这里 ...

  3. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  4. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  5. 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

  6. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  7. 使用pdfjs插件在线预览PDF文件

    前言 本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/g ...

  8. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

  9. WEB在线预览PDF

    这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...

随机推荐

  1. quartz2.3.0（四）JobDataMap—带状态集合的定时器内置集合

    任务类 package org.quartz.examples.example4; import java.util.Date; import org.quartz.DisallowConcurren ...

  2. 在 centos 上安装 virutalbox

    目录 简介 centos 6.x 安装 virtual box Step 1 – Add Required Yum Repositories Step 2 – Install Required Pac ...

  3. @PostConstruct使用总结

    https://blog.csdn.net/qq_37636695/article/details/84791468 https://www.jianshu.com/p/aba99a49a459 @P ...

  4. WPF 程序如何移动焦点到其他控件

    原文:WPF 程序如何移动焦点到其他控件 WPF 中可以使用 UIElement.Focus() 将焦点设置到某个特定的控件,也可以使用 TraversalRequest 仅仅移动焦点.本文介绍如何在 ...

  5. Excel默认去除开头的0

    用户反映打开的.xls文档打开时,excel会默认把某些以0开头零件号去零,导致数据丢失. 解决办法: 先用记事本打开,然后把EXCEL的单元格格式设为文本格式,再把数据复制过去就可以了. 或者先打开 ...

  6. DQL 查询表中的数据

    DQL 查询表中的数据:查询语句(最复杂的语句)不会对数据库中的数据进行修改,只是一种显示数据的方式 语法格式: select 字段列表 from 表名列表 where 条件列表 group by 分 ...

  7. xadmin安装

    1 安装满足django2的版本 pip3 install https://codeload.github.com/sshwsfc/xadmin/zip/django2 2 urls.py里面增加路由 ...

  8. 解决远程连接数据库：Host is not allowed to connect to this MySQL server

    远程连接数据时,报以下提示: Host 'web1' is not allowed to connect to this MySQL server 原因是数据库服务不允许远程登录,没有授权导致,解决方 ...

  9. django--模型字段引用

    如果内置字段不起作用,您可以尝试使用django-localflavor(文档),其中包含对特定国家和文化有用的各种代码片段. 此外,您可以轻松编写自己的自定义模型字段. 注意 从技术上讲,这些模型是 ...

  10. Python_列表操作2

    1.使用sort()方法对列表进行永久性排序: colorsList=['hong','cheng','huang','lv'] colorsList.sort() #正序排序 print(color ...