web项目引入PDF.js并添加水印禁止下载

目录
web项目引入PDF.js并添加水印禁止下载

下载并引入PDF.js实现预览
动态预览PDF文件
隐藏打开、下载、打印等功能
禁止键盘组合按键下载或另存为
禁用鼠标操作
添加全局水印
PDF文件预览效果

普通SSH项目引入PDF.js实现在线预览PDF文件

下载并引入PDF.js实现预览
官网下载地址：https://mozilla.github.io/pdf.js，下载完成后将压缩包解压；这里我下载的是pdfjs-2.2.228-dist
将在WebRoot/script目录下创建一个pdfjs-dist目录，将解压后的文件复制到此目录下(仅复制pdfjs-dist下的子目录即可，根目录下的文件这里未进行复制)
将pdfjs下载时自带的pdf预览文件compressed.tracemonkey-pldi-09.pdf复制到WebRoot目录下用以测试
运行web项目，在网页中预览该文件，PDF可正常显示，如提示无法加载pdf.worker.js文件，可在/web/viewer.js文件中找到如下片段进行修改：

workerSrc: {value: '../build/pdf.worker.js',kind: OptionKind.WORKER
}

改为如下内容：

workerSrc: {value: '/script/pdfjs-dist/build/pdf.worker.js',kind: OptionKind.WORKER
}

预览成功即出现以下界面
动态预览PDF文件

以上步骤只是实现了PDF文件的预览，下面开始配置动态预览项目中的PDF文件

在WebRoot目录下创建pdfView目录(PDF预览的业务目录，用作最后Struts2的跳转视图路径)，将pdfjs-dist目录下的viewer.html文件复制到此目录下，将后缀改为jsp，便于后面动态预览不同的PDF文件
实现预览不同的PDF，只需要将PDF文件加载路径修改即可，在viewer.jsp的head标签内中加入如下代码：

<script type="text/javascript">var productFilePath = "file=${filePath}";//后台Action传入前台的pdf文件路径参数赋值给url
</script>

然后在viewer.js中找到functiion webViewerInitialized函数的位置：

var file;
var queryString = document.location.search.substring(1);//修改这行的内容
var params = (0, _ui_utils.parseQueryString)(queryString);
file = 'file' in params ? params.file : _app_options.AppOptions.get('defaultUrl');
validateFileURL(file);

这里的queryString即从url中读取file参数来设置文件路径，将这行进行修改：

var queryString = productFilePath;

重新预览，即可根据前台不同的预览链接实现不同文件的预览要求
隐藏打开、下载、打印等功能
隐藏功能比较简单，仅需修改viewer.jsp中的按钮是否显示即可，如此处隐藏打开、下载、打印几个按钮

在div#toolbarViewerRight下找到id分别为openFile、print、download等button，在class属性中添加visibleMediumView即可隐藏，效果如下：

2. 如需隐藏鼠标选择、查看文档信息，可在div#secondaryToolbarButtonContainer下找到id分别为cursorSelectTool、documentProperties，在class属性中添加visibleMediumView即可：

<button id="documentProperties" class="secondaryToolbarButton documentProperties visibleMediumView" title="Document Properties…" tabindex="68" data-l10n-id="document_properties"><span data-l10n-id="document_properties_label">Document Properties…</span>
</button>

4 禁止键盘组合按键下载或另存为
1.找到键盘组合按键打印的位置：

var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {window.print();if (hasAttachEvent) {return;}event.preventDefault();if (event.stopImmediatePropagation) {event.stopImmediatePropagation();} else {event.stopPropagation();}return;}
}, true);

2.改为如下内容：

var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {if ((event.keyCode === 80 || event.keyCode === 83) && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {//window.print();if (hasAttachEvent) {return;}event.preventDefault();if (event.stopImmediatePropagation) {event.stopImmediatePropagation();} else {event.stopPropagation();}return;}
}, false);

重新刷新网页，此时尝试通过Ctrrl+P打印或Ctrl+S另存已经不会起作用原文参考
5. 禁用鼠标操作
禁用鼠标选择、鼠标右键等操作，修改viewer.jsp的body标签，添加属性改为如下内容：

<body tabindex="1" class="loadingInProgress"tabindex="1" class="loadingInProgress"oncontextmenu="return false;" leftMargin="0" topMargin="0"oncopy="return false;" oncut="return false;"onselectstart="return false">

添加全局水印

利用canvas添加全局水印，其实就是在viewer.js中遍历文件元素节点的同时，创建水印元素节点并插入到每一页的位置。原文参考

1 在viewer.js中找到如下内容，位置大概在11973行前后：

if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {var textLayerDiv = document.createElement('div');textLayerDiv.className = 'textLayer';textLayerDiv.style.width = canvasWrapper.style.width;textLayerDiv.style.height = canvasWrapper.style.height;//---这里就是要插入水印的位置---if (this.annotationLayer && this.annotationLayer.div) {div.insertBefore(textLayerDiv, this.annotationLayer.div);} else {div.appendChild(textLayerDiv);}textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}

2.插入水印代码后内容如下：

if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {var textLayerDiv = document.createElement('div');textLayerDiv.className = 'textLayer';textLayerDiv.style.width = canvasWrapper.style.width;textLayerDiv.style.height = canvasWrapper.style.height;//---------------------水印开始---------------------var cover = document.createElement('div');cover.className = "cover";cover.innerText = "内容保密，请勿复制或下载"; //这里就是水印内容，如果要按照不同的文件显示不同的水印，可参考pdf文件路径的传值方式，在viewer.jsp中head部位接收后台传值并在这里使用if (this.annotationLayer) {// annotationLayer needs to stay on topdiv.insertBefore(textLayerDiv, this.annotationLayer.div);div.appendChild(cover);} else {div.appendChild(textLayerDiv);div.appendChild(cover);}var coverEle = document.getElementsByClassName('cover'),size = 0,nowWidth = +canvasWrapper.style.width.split("p")[0],//714为100%时，每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值size = 50 * nowWidth / 714 + "px";for(var i=0, len=coverEle.length; i<len; i++){coverEle[i].style.fontSize = size;coverEle[i].style.width = canvasWrapper.style.width;coverEle[i].style.height = canvasWrapper.style.height / 10;}//---------------------水印结束---------------------if (this.annotationLayer && this.annotationLayer.div) {div.insertBefore(textLayerDiv, this.annotationLayer.div);} else {div.appendChild(textLayerDiv);}textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}

3 最后在viewer.css文件开始位置添加水印的css样式完成水印显示：

/* 水印遮罩层 */
.cover{z-index: 100;position: absolute;top: 41%;left: 1%;transform: rotate(330deg);text-align: center;font-size: 310%;padding-left: 30px;letter-spacing: 18px;color:rgba(162, 162, 162, 0.4);
}

6 PDF文件预览效果

web项目引入PDF.js并添加水印禁止下载相关推荐

pdf.js使用说明及禁止下载，打印
PdfJS使用的一些说明参考:https://blog.csdn.net/qubernet/article/details/82599613?utm_medium=distribute.pc_rel ...
关于在vue项目中引入pdf.js的跨域问题（已解决）。
最近公司项目要做一个电子合同盖章的功能,博主想的是用pdf来实现,主要想谈一谈引入pdf.js跨域问题. 之前小编在遇到这个问题的时候也是百度了好多关于解决这方面问题的文章,但最终都没有实际解决.举两 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
angular项目引入reveal.js
angular项目引入reveal.js 一背景二解决方案 1 引入reveal.js 2 在angular.json的styles中引入reveal.js的css样式,作为全局样式. 3 修改 ...
ElementUI项目使用pdf.js预览pdf文件
最近因为要用Elementui展示pdf文件.查了很多资料,发现vue-pdf还比较初级,不如pdf.js成熟.所以使用的pdf.js. 1.下载pdf.js 点击这里可以[下载]. 2.解压打开e ...
uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上方法一: 引用网址:https://www.cnblogs. ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
php vue pdf预览,Vue项目使用pdf.js
前段时间有个支持在线学习功能的项目,有需要在线预览pdf格式课件的功能,我就想在线预览pdf多简单,因为大部分浏览器都支持打开pdf文件,所以直接放个iframe然后src是pdf文件的地址不就行了吗 ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...

web项目引入PDF.js并添加水印禁止下载

web项目引入PDF.js并添加水印禁止下载相关推荐

最新文章

热门文章