前言
有时们开发上传附件功能的时候,也有可以需要对附件添加一些在线预览、打印、下载的功能。我们可以自己开发,也可以第三方插件。下面到我的项目笔记一些相关的代码,方便以后查找以及使用
步骤
- 首先去 PDF.js 官网下载插件,我下载的版本v2.2.228;
- 根据自己的项目,放在自己项目的指定目录下;
- 然后根据自己的项目需求自己进行修改。
插件的目录结构
代码片段
我使用的是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
// });
// });