在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="../build/pdf.js"></script>

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

PDFJS.workerSrc = '../build/pdf.worker.js';

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