学问文库

 找回密码
 免费注册

快捷登录

QQ登录

只需一步,快速开始

pdf.js屏蔽复制、打印、下载功能并加水印

[复制链接]
发表于 2022-10-29 10:48:13 | 显示全部楼层 |阅读模式
屏蔽功能按钮
新版 pdf.js 使用style设置隐藏无效,经研究可以通过 setAttribute 较好的解决。
viewer.html 的<head>最后,添加:

  1. <script>

  2. function onBodyLoad()

  3. {

  4.     var appConfig = PDFViewerApplication.appConfig;

  5.     appConfig.toolbar.viewBookmark.setAttribute('hidden', 'true');

  6.    appConfig.secondaryToolbar.viewBookmarkButton.setAttribute('hidden', 'true');

  7.     appConfig.toolbar.openFile.setAttribute('hidden', 'true');

  8.     appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true');

  9.     appConfig.toolbar.download.setAttribute('hidden', 'true');

  10.     appConfig.secondaryToolbar.downloadButton.setAttribute('hidden', 'true');

  11.     appConfig.toolbar.print.setAttribute('hidden', 'true');

  12.     appConfig.secondaryToolbar.printButton.setAttribute('hidden', 'true');

  13. }

  14. </script>
复制代码

<body> 添加下列属性:onload="onBodyLoad()"
这样,打开、打印、下载按钮就消失了



解决了下载按钮之后,我发现鼠标焦点在iframe里时 使用ctrl+s也能下载文件。解决这个问题同样也是找到pdf/web/viewer.js,注释下载代码就ok了。(不同版本所在行数可能不同,根据行数找不到时请根据内容搜索)




这样用户就无法下载pdf文件了,我们的目的就达到了


禁用鼠标选择、鼠标右键等操作,修改viewer.jsp的body标签,添加属性改为如下内容:
  1. <body tabindex="1" class="loadingInProgress"
  2.         tabindex="1" class="loadingInProgress"
  3.         oncontextmenu="return false;" leftMargin="0" topMargin="0"
  4.         oncopy="return false;" oncut="return false;"
  5.         onselectstart="return false">
复制代码

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

1.在viewer.js中找到如下内容,位置大概在11973行前后:
  1. if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
  2.    var textLayerDiv = document.createElement('div');
  3.    textLayerDiv.className = 'textLayer';
  4.    textLayerDiv.style.width = canvasWrapper.style.width;
  5.    textLayerDiv.style.height = canvasWrapper.style.height;
  6.    //---这里就是要插入水印的位置---
  7.    if (this.annotationLayer && this.annotationLayer.div) {
  8.       div.insertBefore(textLayerDiv, this.annotationLayer.div);
  9.    } else {
  10.       div.appendChild(textLayerDiv);
  11.    }
  12.    textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
  13. }
复制代码


  1. if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
  2.     var textLayerDiv = document.createElement('div');
  3.     textLayerDiv.className = 'textLayer';
  4.     textLayerDiv.style.width = canvasWrapper.style.width;
  5.     textLayerDiv.style.height = canvasWrapper.style.height;
  6.     //---------------------水印开始---------------------
  7.     var cover = document.createElement('div');
  8.     cover.className = "cover";
  9.     cover.innerText = "内容保密,请勿复制或下载"; //这里就是水印内容,如果要按照不同的文件显示不同的水印,可参考pdf文件路径的传值方式,在viewer.jsp中head部位接收后台传值并在这里使用
  10.     if (this.annotationLayer) {
  11.         // annotationLayer needs to stay on top
  12.         div.insertBefore(textLayerDiv, this.annotationLayer.div);
  13.         div.appendChild(cover);
  14.     } else {
  15.         div.appendChild(textLayerDiv);
  16.         div.appendChild(cover);
  17.     }
  18.     var coverEle = document.getElementsByClassName('cover'),size = 0,
  19.         nowWidth = +canvasWrapper.style.width.split("p")[0],
  20.         //714为100%时,每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值
  21.         size = 50 * nowWidth / 714 + "px";
  22.     for(var i=0, len=coverEle.length; i<len; i++){
  23.         coverEle[i].style.fontSize = size;
  24.         coverEle[i].style.width = canvasWrapper.style.width;
  25.         coverEle[i].style.height = canvasWrapper.style.height / 10;
  26.     }
  27.     //---------------------水印结束---------------------
  28.     if (this.annotationLayer && this.annotationLayer.div) {
  29.         div.insertBefore(textLayerDiv, this.annotationLayer.div);
  30.     } else {
  31.         div.appendChild(textLayerDiv);
  32.     }

  33.     textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
  34. }
复制代码

3.最后在viewer.css文件开始位置添加水印的css样式完成水印显示:
  1. /* 水印遮罩层 */
  2. .cover{
  3.   z-index: 100;
  4.   position: absolute;
  5.   top: 41%;
  6.   left: 1%;
  7.   transform: rotate(330deg);
  8.   text-align: center;
  9.   font-size: 310%;
  10.   padding-left: 30px;
  11.   letter-spacing: 18px;
  12.   color:rgba(162, 162, 162, 0.4);
  13. }
复制代码
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|小黑屋|网站声明|学问文库 ( 冀ICP备2021002572号 )|网站地图

GMT+8, 2023-1-31 21:29 , Processed in 0.019608 second(s), 11 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

文档搜索 客服微信 分享有奖 快速回复 返回顶部 返回列表