程序员

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.github.io/
    下载按默认安装方式就行,然后在开始菜单找到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文件。