PDF.js 在线pdf阅读插件(禁止打印,下载,每页水印)

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);    
}

效果如下(这马赛克加的也没谁了-_-!)
这里写图片描述

4.F12带来的隐患

这里写图片描述

打开F12开发者,你会很明显的发现。PDF.js会每个页面进行一个请求.如果你再双击一下这些请求。。。你会发现。。。。。
这里写图片描述
mmp,这不又用浏览器默认pdf加载器打开了吗!!??进一步的,我们可以监听F12按键,关闭F12的开发者选项弹出。

依然是那个问题:网页是面向普通客户还是有心的程序员。

参考文章:
http://blog.csdn.net/xiangcns/article/details/42089189

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值