//使用文件预览的原因是：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. python3遇到的问题

    a bytes-like object is required,not str': 问题出在python3.5和Python2.7在套接字返回值解码上有区别:python bytes和str两种类型可 ...

  2. git简单介绍

    一种常见的版本控制工具 获取 克隆仓库 git支持以ssh或者http的方式来标识远程仓库 git clone git@github.com:username/project.git git clon ...

  3. 在内网中 vue项目添加ECharts图表插件

    原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...

  4. （转）三大WEB服务器对比分析（apache ,lighttpd,nginx）

    ref : https://www.iteye.com/blog/hai0378-1860220   一．软件介绍(apache  lighttpd  nginx) 1. lighttpd Light ...

  5. 机器学习 降维算法: isomap & MDS

    最近在看论文的时候看到论文中使用isomap算法把3D的人脸project到一个2D的image上.提到降维,我的第一反应就是PCA,然而PCA是典型的线性降维,无法较好的对非线性结构降维.ISOMA ...

  6. 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据

    今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...

  7. Xinetd服务的安装与配置详解

    1．什么是xinetd xinetd即extended internet daemon,xinetd是新一代的网络守护进程服务程序,又叫超级Internet服务器.经常用来管理多种轻量级Interne ...

  8. top 命令 详解

    VIRT:virtual memory usage 虚拟内存 1.进程“需要的”虚拟内存大小,包括进程使用的库.代码.数据等 2.假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m ...

  9. Attribute与Property关系

    总的来说,其实是HTML Attribute 与 DOM property之间的关系. 1 什么是Property? JS DOM Object对象有property.一个property可能是不同数 ...

  10. 通过 Web Deploy 发布的配置

    罩着别人的配置弄了一下午,死活认证通不过,后来好不容易试出来,备忘. 服务端:安装IIS,启动管理程序,安装Web Deploy, 建立网站,建立IIS用户,进网站的权限管理里面给IIS用户授权. V ...