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

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
      //   });
      // });
  • 2
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值