//使用文件预览的原因是：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. Django组件之cookie、session

    一.cookie 1.1 产生背景 HTTP协议是无状态的,对服务器来说,每次的请求都是独立的.状态可以理解为客户端和服务器在某次会话中产生的数据,那无状态的就以为这些数据不会被保留.会话中产生的数据 ...

  2. RabbitMQ延迟消息队列实现定时任务完整代码示例

  3. 3.02定义常量之const

    [注:本程序验证是使用vs2013版] #include <stdio.h> #include <stdlib.h> #include <string.h> #pr ...

  4. jwt 0.9.0（三）jwt客户端存储状态可行性分析，及Java代码案例

    Jwt客户端存储状态可行性分析 1.前端首次访问后台,后台生成token,放在http header的Authorization里(官网推荐,可解决跨域cookie跨域问题),并且Authorizat ...

  5. git clone一个仓库下的单个文件【记录】

    注意:本方法会下载整个项目,但是,最后出现在本地项目文件下里只有需要的那个文件夹存在.类似先下载,再过滤. 有时候因为需要我们只想gitclone 下仓库的单个或多个文件夹,而不是全部的仓库内容,这样 ...

  6. 单例DCL模式

    单例模式可以保证系统中一个类只有一个实例.即一个类只有一个对象实例. 一般写法 public class DCLSingle { public static DCLSingle instance= n ...

  7. python中的可哈希与不可哈希

    什么是可哈希(hashable)? 简要的说可哈希的数据类型,即不可变的数据结构(字符串str.元组tuple.对象集objects). 哈希有啥作用? 它是一个将大体量数据转化为很小数据的过程,甚至 ...

  8. 【面试突击】- SpringMVC那些事（一）

    1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于MVC架构的用来简化web应用程序开发的应用开发框架,它是Spring的一个模块,无需中间整合 ...

  9. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  10. iOS配置TARGETS

    说一下背景 自从这个项目不死不活的迭代了2年,从项目搭建到现在,一直都是自己在开发和维护,所以项目结构非常清晰,但是之前的水平写的代码现在看来也是惨不忍睹,不过本人比较懒,也就没有考虑过重构的事情 - ...