首页 > 代码库 > 在web项目中集成pdf.js的默认查看器

在web项目中集成pdf.js的默认查看器

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="http://www.mamicode.com/build/pdf.js"></script>

以及·里面的‘pdf.worker.js’为你的真实路径即可

PDFJS.workerSrc = http://www.mamicode.com/‘../build/pdf.worker.js‘;>

参考:Integrating PDF.js as PDF viewer in your web application