浏览器在线预览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>

来源：https://www.cnblogs.com/indifferent/p/10975041.html

标签

plugin