java集成pdf.js实现pdf文件在线预览

最近项目需要实现在线预览pdf文件功能，找来找去，发现有个pdf.js的类库挺好用，直接用js实现在线预览。

pdf.js是开源项目， github 的地址：

https://github.com/mozilla/pdf.js

根据教程指引，有以下几个步骤：

• 使用把源代码clone到本地，如果是linux的话很方便，windows的话要另外下载git工具；

  git地址： https://git-for-windows./

  下载按默认安装方式就行，然后在开始菜单找到git打开git cmd就可以clone项目，当然，也可以直接download项目，不过国内的下载的速度实在是太慢了，可以更改自己的hosts文件加快下载，在hosts文件添加：

  185.31.16.184 github.global.ssl.fastly.net

  PS：其实我们使用pdf.js，最终只需要构建后的内容，大家可以到我的百度云盘下载： http://pan.baidu.com/s/1bDK8Zs ，下载后复制generic到tomcat的webapps下，这样访问 http://localhost:8080/web/viewer.html 能看到demo效果，跳过以下步骤，直接到项目集成。

• clone好源码后使用nodejs的包管理工具npm安装gulp构建工具，如下：

  npm install -g gulp-cli

  安装好gulp之后在源代码使用npm安装模块：

  npm install

  安装好模块后使用gulp构建本地web服务器：

  gulp server

  效果如下：

接着访问 http://localhost:8888/web/viewer.html 就能看到效果：

接下来使用gulp构建pdf.js，如下：

gulp generic

构建完成后项目目录下生成build文件夹：

generic/web/viewer.html渲染pdf阅读器页面，而generic/web/viewer.js则是打开指定的pdf文件，打开viewer.js可以看到：

可以看到，默认打开的是generic/web/compressed.tracemonkey-pldi-09.pdf文件，再来看下面这段代码：

这样，我们就可以使用传递file形参来动态指定打开的pdf文件，如：

http://localhost:8080/generic/web/viewer.html?file=file.pdf

PS：如果觉得以上步骤繁琐的话，可以把构建后的 照样能看到demo的效果。

• 接着把项目集成到web项目中， 把generic作为插件使用，目录结构如下：

  

先写一个简单的jsp页面，使用iframe标签来加载pdf：

接着写个controller读取pdf文件并返回：

运行，在浏览器访问以下地址：

http://localhost:8080/res/pdf.jsp

效果如下：

本质是访问generic/web/viewer.html，通过指定的file形参打开指定pdf文件。