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.youkuaiyun.com/xiangcns/article/details/42089189