pdf.js框架的魅力所在，为其为HTML5实现的，无需任何本地支持，而且对浏览器的兼容性也是比较好，要求只有一个：浏览器支持HTML5就好了！（不过对于低版本的IE，就只能节哀了！）据说IE9以上是OK的，因为我本地是IE11，所以我只在IE11上测试过，是通过的（当然火狐，360，我也测了一下，是可以的）。
在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：
1. 向访客展示指定的PDF文件
2. 在电商网站上购物之后，下载电子发票之前先预览发票。
3. 电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。
目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。
但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。
Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。
一、pdf.js 简介
官网地址：http://mozilla.github.io/pdf.js/，下载稳定版本，目前最新稳定版为v2.6.347
1. 下载到本地
2. 解压查看
解压缩，里面包含2个目录
build目录包含以下内容，其中pdf.js是核心文件
web目录包含以下内容，其中viewer.html是pdf查看器
3. 查看viewer.html
在 notepad++ 中打开viewer.html，引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js、资源文件local.properties。
4. 打开viewer.html
直接在浏览器中打开viewer.html，能正常的显示pdf查看器，但是无法显示pdf文件。
pdfjs-2.6.347-dist包，部署在服务器上之后，通过http方式访问才能正常的加载显示pdf格式文件的内容
5. 上传文件
把文件上传到服务器之后，通过http://你的域名/pdfjs/web/viewer.html方式访问该查看器。该查看器中默认加载的是 pdf.js 的使用说明书内容。
打开viewer.js， 可以看到默认文件指向了“compressed.tracemonkey-pldi-09.pdf”
二、将 pdf.js 集成到项目网页中
将解压缩的内容复制到项目中
有多种方式加载加载并查看pdf文件内容。
方式1：独立页面中查看
- 通过链接方式，在
viewer.html页面中独立查看 - 实现方法：通过
<a/>标签链接到viewer.html页面，需要传递一个重要的参数file，设置为要显示的pdf文件的路径
<a href="file/pdfjs/web/viewer.html?file=http://你的域名/文件路径/test.pdf">点击查看pdf内容</a>
- 点击a链接，打开的独立窗口：
方式2；嵌入在网页中
- 某些场景下需要将PDF查看器集成在业务网页中，便于业务流程的操作
- 实现方法：通过
iframe实现。任然需要传递file参数，设置pdf文件的路径
<div id="divPdfViewPanel2" style="margin: 5px;">
<iframe src="pdfjs存放路径/web/viewer.html?file=http://文件域名/文件路径/test.pdf" width="100%" height="400px;"></iframe>
</div>
但是该方法把pdf文件写死了。正常情况下都是通过程序动态的设置pdf文件，这时就需要使用Ajax动态的读取数据库或者从其他地方传递过来并设置该file参数。这种方法我暂时使用不到，所以暂不讨论。
三、加载指定的pdf文件
查看 viewer.js，如下图红色方框内的逻辑，可以知道 pdf.js 支持通过 PDF文件路径以及 PDF文件流的方式来加载显示。
网络上有很多的方法，通过读取PDF文件流来实现。因为没有相关需求，所以不尝试了。
四、跨域设置
在第二大部分中介绍的2种方法，通过HTTP方式实现，这里涉及到跨域问题。如果PDF文件与网站部署在一起，则不存在跨域。如果PDF在网站之外，则涉及到跨域问题。打开viewer.js文件，注释掉以下内容。
还有其他方式也可以实现跨域，网络上有很多优秀的解决方案。但是上述的方法最简单直接。
关于跨域的详细信息，可以参考 https://www.cnblogs.com/ranyonsue/p/11770769.html。
五、魔改
正在魔改，稍后更新~~