pdf.jsMozilla开源的一项用于在HTML5平台上显示pdf文档的技术,Mozilla自己的Firefox浏览器也用了pdf.js来预览pdf,可见应该是一个比较成熟稳定的方案(btw,chrome用的是foxit的技术,国人骄傲啊)。当然类似的方案有很多,并且大多都提供了丰富的api,如果你仔细读文档/api,可能会有好的收获,但是Mozilla同时把在Firefox内的查看器也一道开源了,对于大部分定制性不强,只需要浏览的使用场景来说,似乎可以直接“拿来主义”,本文就说的是如何直接使用这个自带的viewer
前提,既然是基于HTML5的方案,那么浏览器兼容性是个大问题,官方尽可能地做了兼容(通过compatibility.js
文件),但是仍然无法支持IE9以下的浏览器,详见此,IE9以下要支持,要么换方案,要么直接在不支持的情况下显示下载链接吧。
1,下载源码
git clone https://github.com/mozilla/pdf.js.git pdfjs
cd pdfjs
2, 编译
需要node环境
node make generic
这会在你的根目录下生成一个build
文件夹,目录结构:
/
generic
build
pdf.js
pdf.worker.js
web
...
其中,build路径下是主程序,web路径下是查看器程序
3, 运行网站
node make server
你也可以用发布在自己的任意web服务器,用上述命令可以以当前目录pdfjs
为根目录伺服一个网站,你可以顺便查看下examples
里面的内容,以及web
(这就是Mozilla的pdf查看器所在)里面的内容。
当然,你也可以直接跑到上一节生成的generic目录下伺服一个网站,这会让事情显得简单很多。总之,网站部署好后,我们只要找到web路径下的view.html静态文件,然后传入file=xxx.pdf
形式的参数即可,比如:
http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf
(同站文件用相对路径当然也没问题)
4, 修改部署路径
如果你的项目部署并不是generic/build&web
(肯定大多数不是),你只需要更改·文件里面的pdf.js
路径为你的真实路径,
<script type="text/javascript" src="../build/pdf.js"></script>
以及·里面的‘pdf.worker.js’为你的真实路径即可
PDFJS.workerSrc = ‘../build/pdf.worker.js‘;
参考:Integrating PDF.js as PDF viewer in your web application