PDF.js 在线pdf阅读插件（禁止打印，下载，每页水印）

最新推荐文章于 2024-09-01 07:00:00 发布

澪月

最新推荐文章于 2024-09-01 07:00:00 发布

阅读量5.9w

点赞数 11

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/for_gg/article/details/78616063

版权

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

PDF.js实际运行起来的页面UI效果：http://mozilla.github.io/pdf.js/web/viewer.html

插件下载：https://pan.baidu.com/s/1jIDxrYA

1.调用方法：

把generic文件放在项目代码中

<a href="resources/js/pdfJs/generic/web/viewer.html?file=../../../../instruction/instruction.pdf" target="view_window">系统操作指南</a>

直接在页面里使用a标签，打开的位置为viewer.html的位置
file书写想要加载的pdf相对于viewer.html的相对地址
这样就可以把pdf加载到viewer页面里了。
这里写图片描述

2.禁止打印，下载：

寻找方法
右键打印的按钮观察打印按钮的id，为print。我们可以在viewer.html中找到这个按钮，(同理还有download的下载按钮)。注释掉它们。

运行会发现页面报错，如果懒得研究js可以
解决方法：
1. 直接隐藏掉按钮为button添加style样式style="visibility:hidden"
2. .这时我们右键点击页面仍然会出现弹出菜单，里面有打印选项：
  在js里通过oncontextmenu事件，屏蔽系统自带的右键列表。同样可以自定右键菜单制定自己想要的效果。

 document.oncontextmenu=function(ev){
        return false;
    }

3.每页水印

这里写图片描述

水印的效果原理：

1.水印用我们可以通过遮挡层来实现。
2.水印的位置：在每一个pdf页面里添加一个对于当前pdf页面相对定位的div。
3.定义遮挡层css样式，制作想要的水印效果
4.考虑页面缩放问题
分析页面寻找解决方法：

右键检查pdf页面，我们可以看到页面放在class="page"的div里，页码由data-page-number设置，在viewer.js里搜寻查看相关的内容。通过这种方式，我们可以设想，在页面添加class="page"时，添加遮挡层cover为孩子节点。继续观察canvasWrapper和textLayer的代码，我们不难发现需要添加修改的位置.

解决方法：
修改viewer.js
在3503行前后修改,添加以下代码。即为在在page中添加textLayer的孩子节点的同时，我们添加cover节点，并根据页面大小修改div大小


textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvas.style.width;
textLayerDiv.style.height = canvas.style.height; 
---------------------------------------------------   
var cover = document.createElement('div');
cover.className = "cover";
cover.innerText = "仅供参考，禁止下载。";
if (this.annotationLayer) {
    // annotationLayer needs to stay on top
    div.insertBefore(textLayerDiv, this.annotationLayer.div);                  
    div.appendChild(cover);                         
} else {
   div.appendChild(textLayerDiv);
   div.appendChild(cover);    
}
var cover = document.getElementsByClassName('cover'),size = 0,
nowWidth = +canvas.style.width.split("p")[0],
//714为100%时，每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值
size = 50*nowWidth/714 +"px";  
for(var i=0, len=cover.length; i<len; i++){     
    cover[i].style.fontSize = size;
    cover[i].style.width = canvas.style.width;
    cover[i].style.height = canvas.style.height;            
 }
}

css文件：利用 position: absolute;
top和left用百分比定位。

.cover{
 z-index: 100;
 position: absolute;
 top: 41%;
 left: -13%;
 transform: rotate(9deg);
 text-align: center;
 font-size: 310%;
 padding-left: 30px;
 letter-spacing: 18px;
 color:rgba(162, 162, 162, 0.4);    
}