pdf.js+Viewer.js 预览PDF附件

前言

有时们开发上传附件功能的时候，也有可以需要对附件添加一些在线预览、打印、下载的功能。我们可以自己开发，也可以第三方插件。下面到我的项目笔记一些相关的代码，方便以后查找以及使用

步骤

1. 首先去 PDF.js 官网下载插件，我下载的版本v2.2.228；
2. 根据自己的项目，放在自己项目的指定目录下；
3. 然后根据自己的项目需求自己进行修改。

插件的目录结构

代码片段

我使用的是TP3.2框架，这里使用iframe引用 viewer.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" />
    <style type="text/css" media="screen">
        html, body	{ height:100%; }
        body { margin:0; padding:0; overflow:auto; }

    </style>

    <script type="text/javascript">
        $(document).ready(function(){
            var fileid = getPUrlParam("id");
            //var ret = ajaxGetData("/test/showFileFromDataCon",{'fileid':fileid,'type':type});
            //var path = ret.data;
            // var path='/Uploads/MedicalRecord/15/20190724/69263/4dfsdf-217FD5E0-C708-2946-B9A5-D4620544F78B_1.pdf';
            // $("#viewinfo").attr('src','/test/viewer?file='+path);//文件路径预览

            $("#viewinfo").attr('src','/test/viewer?file=http://项目地址/test/showFileFromDataCon/fileid/'+fileid);//文件流预览
            
        });

    </script>
    <div  style="width: 100% ;text-align: center ; " >
        <iframe id="viewinfo" style="width: 100%;height: 100%;" ></iframe>
    </div>

如果不想用户能打印或者下载PDF，可以在前段viewer.html隐藏掉，不能按钮，删除会报错，下面是viewer.html的一些修改

<!--这里根据自己的项目修改自己的引用文件路径-->
<script type="text/javascript" src="/CrmR/js/jquery.js"></script>
<link rel="stylesheet" href="/CrmR/pdfjs/web/viewer.css">


<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="/CrmR/pdfjs/web/locale/locale.properties">
<script src="/CrmR/pdfjs/build/pdf.js"></script>

<script src="/CrmR/pdfjs/build/pdf.worker.js"></script>

<script type="text/javascript" src="/CrmR/js/jquery.js"></script>

<script src="/CrmR/pdfjs/web/viewer.js"></script>

下面是 viewer.html 可以根据自己的权限，隐藏相应的按钮，220,和224行左右。但是这个只是做到前端隐藏，同行的人可以根据FireBug更改代码，还是可以打印或者下载的。想要完全禁，只有修改viewer.js代码。

<script type="text/javascript">
       var printAuth = "{$printAuth}";
       var downloadAuth = "{$downloadAuth}";

       if(!printAuth){
          $('#print').attr('style','display:none');//隐藏按钮  不会占用标签位置
       }
       if(!downloadAuth){
          $('#download').attr('style','display:none');//隐藏按钮  不会占用标签位置
          //$('#download').attr('style','visibility:hidden');//隐藏按钮  还会占用标签位置
          //$("#download").attr("disabled","disabled"); //禁用按钮 不隐藏按钮
       }
    
  </script>

预览效果

在 viewer.js 13341到13350行左右，把这段代码注释掉，就可以完全禁用到打印和下载了。

	  // items.print.addEventListener('click', function () {
      //   eventBus.dispatch('print', {
      //     source: self
      //   });
      // });
      // items.download.addEventListener('click', function () {
      //   eventBus.dispatch('download', {
      //     source: self
      //   });
      // });