浏览器在线预览pdf、txt、office文件

//使用文件预览的原因是：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文件的更多相关文章

Java实现word文档在线预览，读取office文件
想要实现word或者其他office文件的在线预览,大部分都是用的两种方式,一种是使用openoffice转换之后再通过其他插件预览,还有一种方式就是通过POI读取内容然后预览. 一.使用openof ...
JAVAWeb项目实现在线预览、打开office文件
Web项目实现在线预览浏览word.ppt.excel文档方法调用以下链接 https://view.officeapps.live.com/op/view.aspx?src=你的文档绝对路径这里 ...
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
#网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
#网页中动态嵌入PDF文件/在线预览PDF内容#
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
前端实现在线预览pdf、docx、xls、ppt等文件
思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...
用pdf.js实现在移动端在线预览pdf文件
用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 2.配置下载下来的文件包,就是一个demo ...
使用pdfjs插件在线预览PDF文件
前言本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤下载 pdfjs 并引入项目中到PDFJS官网 http://mozilla.github.io/pdf.js/g ...
.net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法
FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...
WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...

随机推荐

day31——recv工作原理、高大上版解决粘包方式、基于UDP协议的socket通信
day31 recv工作原理源码解释: Receive up to buffersize bytes from the socket. 接收来自socket缓冲区的字节数据, For the opt ...
quartz2.3.0（十一）任务执行中故障情况，可设置重新执行任务
任务类 package org.quartz.examples.example11; import org.quartz.Job; import org.quartz.JobExecutionCont ...
quartz2.3.0（一）您的第一个Quartz程序
任务类 package org.quartz.examples.example1; import java.util.Date; import org.slf4j.Logger; import org ...
日志之slf4j和logback日志系统（二）
这篇文章我们讲一下,如何使用slf4j和logback组合来搭建一套日志系统. 介绍如果我们的系统是新系统,也就是之前没有引入其他的日志工具,那么只需要引入,如果之前已经用了common-loggi ...
easyui-datagrid清空表中原有数据
$('#dg').datagrid('loadData', { total: 0, rows: [] });
树莓派Raspbian系统格式化挂载硬盘
1.查看树莓派系统挂载的储存设备使用工具查看系统识别到的硬盘设备,命令: fdisk -l /dev/sda 和 /dev/sdb 分别是两块硬盘. 2.修改硬盘分区 Linux和windows一 ...
WCF NetTcpBinding
服务端: <system.serviceModel> <bindings> <netTcpBinding> <binding portSharingEnabl ...
Java文件字符流
1.字符编码(Character encoding)和编码集(Character set) 字符编码(Character encoding)是将字符转为字节或字节数组的过程. 字符集(Characte ...
MVC模式和Maven项目构建
1. 尽管Servlet + JSP可以完成全部的开发工作,但是代码耦合度高.可读性差.重用性不好,维护.优化也不方便.所以才有了MVC. MVC是当前WEB开发的主流模式,核心是使用Strut ...
每周分享五个 PyCharm 使用技巧（四）
文章首发于微信公众号:Python编程时光 PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌 ...

浏览器在线预览pdf、txt、office文件

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

随机推荐

热门专题