PDF.js使用笔记

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件。

最近拿到的任务是实现在网站前端对pdf文件的预览和下载，准备使用PDF.js实现，边学习边写下记录。

环境

jeesite开发平台、Eclipse

下载

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

这里提供github的下载地址，点击下载。

文档结构

下载下来的包解压之后，我们需要看一下它的结构。

build和web这两个文档是关键。

web/viewer.js中看来，应该是可以打开compressd这个pdf的。

但是打开web/viewer.html，发现并不能成功打开。

查了一下，发现PDF.js默认情况下不可以打开本地PDF文件（发布后可以打开服务器文件），也不可以跨域浏览PDF。

发布

把整个文档放进webapp目录下，然后通过浏览器访问http://localhost:8080/InformationService/pdfjs/web/viewer.html
终于可以看到成功打开了pdf啦。

（InformationService是我工程的名字，根据个人情况改动）

这时我突然发现就算没有用pdf.js插件，也能在线浏览pdf，试了三个浏览器（谷歌、ie10、edge）都可以。经过大佬的提示，注意到使用了pdf.js插件时浏览pdf的界面是不一样的。

对比谷歌浏览器自带的pdf插件，可以看到pdf.js上面的菜单栏按钮更多。

大佬说，pdf.js是得有的，因为浏览器版本内核包括用户对浏览器自己的一些设置可能会影响到预览。

下一步继续。

把pdf.js写进jsp

主要在viewer的基础上进行改动。

参考网上的办法，使用传递file形参来动态指定打开的pdf文件。

首先打开viewer.js，搜索file，找到下面这句。（Ctrl+F）

这句话的意思是接收一个file形参，如果没有的时候使用默认值appConfig.defaultUrl。

这个值是什么呢？

可以看到本方法内定义了appConfig的值，是PDFViewerApplication.appConfig。

下一步我们搜索PDFViewerApplication方法看看。

在PDFViewerApplication内找到appConfig。

结果太多了，于是我改为搜索defaultUrl。

这下很快就找到了。

下一步肯定要搜索DEFAULT_URL啦。

终于找到了我们想看到的。这就解释了为什么打开viewer.html的时候显示的pdf文件啦。

如果我们想要在自己的网页中插入可浏览的pdf文件，就只要在html中加入一个链接，指向viewer.html就可以了。归根结底来说，我们是利用viewer.html来进行修改。

那么怎么做才能打开我们任意想打开的pdf文件呢？

先进行一个小测试。把原本的default_url清空。

再通过file参数打开。

http://localhost:8080/InformationService/static/pdfjs/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf

可以看到，view.html 可以通过页面参数传值的方式加载pdf文件。

这样写当然也是可行的。

那么我们可以这样做来控制file参数的值。

具体pdf的参数值，还要看上传pdf的后台是怎么写的了。

本文参考：
http://www.cnblogs.com/xiangliuyunyang/p/5956453.html
http://blog.csdn.net/xiao190128/article/details/54927730
http://blog.csdn.net/wang704987562/article/details/53895830
http://blog.csdn.net/xiangcns/article/details/42089189