//使用文件预览的原因是：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. Self-paced Clustering Ensemble自步聚类集成论文笔记

    Self-paced Clustering Ensemble自步聚类集成论文笔记 2019-06-23 22:20:40 zpainter 阅读数 174  收藏 更多 分类专栏: 论文   版权声明 ...

  2. asp.net WEB简单打印

    ASP.NET网页打印 2018.08.26 18:50 1096浏览   昨晚朋友要求在前段时间完成的新闻的网站上加上一个功能,就是在每篇新闻浏览的页面, 加一个打印铵钮.让用户一点打印,能把整篇文 ...

  3. ASP.NET Core 入门（2）（WebApi接口请求日志 Request和Response）

    以前 .NET Framework WebApi 记录接口访问日志,一般是通过Filter的方式进行拦截,通过重写ActionFilterAttribute的OnActionExecuting实现拦截 ...

  4. MVC比WebForm的优势，为什么使用MVC

    前言 如果你看了最近微软的议程,你会发现他们现在的焦点除了MVC,还是MVC.问题在于为什么微软如此热衷于丢弃传统的APS.NET Webform而转向ASP.NET MVC?本文就主要来讨论这个问题 ...

  5. selenium的显示等待和隐式等待的区别

    什么是显示等待和隐式等待?显示等待就是有条件的等待隐式等待就是无条件的等待 隐式等待 当使用了隐式等待执行测试的时候,如果 WebDriver没有在 DOM中找到元素,将继续等待,超出设定时间后则抛出 ...

  6. js 算法，判断一个数组中的数字出现多少次

    let arr = [11, 11, 2, 2, 5, 5, 5, 5, 3]; //创建一个map,把每个数字和其个数相对应 let countObj = {}; for (i = 0; i < ...

  7. there is no route defined for key Agreement(react native bug记录)

    调试react native的项目有一个报错: there is no route defined for key XXXX 它发生在我调试TabNavigator选项卡路由器的时候,我把如下代码的A ...

  8. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  9. js 删除 数组中某个元素（转载）

    来源:https://www.jb51.net/article/134312.htm js删除数组中某一项或几项的几种方法 https://www.jb51.net/article/154737.ht ...

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

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