【HTML/JS】Pdf.js使用教程

http://www.th7.cn/web/js/201505/103416.shtml

pdf.js框架的魅力所在，为其为HTML5实现的，无需任何本地支持，而且对浏览器的兼容性也是比较好，要求只有一个：浏览器支持HTML5就好了！（不过对于低版本的IE，就只能节哀了！）

据说IE9以上是OK的，因为我本地是IE11，所以我只在IE11上测试过，是通过的（当然火狐，360，我也测了一下，是可以的）。

 

因为项目开发需要，在线展示PDF，而且要兼容IE，所以就选择了pdf.js，但是网上对他的教程很少，我花了一天时间才搞定，回头看了一下，也没有想象中那么困难，所以决定写一篇博客，以便大家参考！

以下是pdf.js相关的网址：

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

 

上面这个网址，有pdf.js的基本简介，以及如何获取源码，之后如何进行构建！

 

但是他的获取源码使用：

 

$ git clone git://github.com/mozilla/pdf.js.git

 

 

 

构建使用：

 

$ node make generic

 

 

 

不知道在Windows7上该怎么用git、node（如果有知道的，可以告诉我下，在此谢过！），所以我就改用linux进行构建（期间有很多心酸历程，感觉都可以拍成电影了！！！比如说我用git获取源码时，系统提示我git没有安装，我用node时，提示我ShellJs没有安装，安装ShellJS，他告诉我要使用npm，意料之中，npm我也没有安装...），其实，我们使用pdf.js，最终只需要构建后的内容，大家可以通过这里进行下载：

http://yunpan.cn/cwmjKF6jKY6Kb  访问密码 c14a

 

构建后的目录结构为：

 

有了构建后的build内容，我们就可以做一个简单的测试，把generic拷贝到Tomcat的webapps中

启动Tomcat后，就可以通过：

http://localhost:8080/generic/web/viewer.html

进行访问！可以看到一个很帅气的界面：

generic/web/viewer.html主要是渲染pdf阅读器的样式，而generic/web/viewer.js则是指定打开的pdf文件（当然还有其他功能，不过这些都不是我们关心的），我们看位于generic/web/viewer.js的一段代码：

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

这就告诉我们，可以通过传递file形参来动态指定打开的pdf文件！如：

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

 

 

下面我就介绍下，具体嵌入项目中是如何运用的！

可以把generic中的内容作为第三方插件进行使用，在项目中可以像如下存放：

然后页面可以使用<iframe>标签来加载pdf

1 <iframe src="<c:url value="/resources/plugin/pdfJs/generic/web/viewer.html" />?file=<c:url value="/publicity/displayPDF.do" />" width="100%" height="800"></iframe>

效果图，如下：

实质就是我们直接访问generic/web/viewer.html，然后为其指定一个file形参，用于指定打开的pdf文件！我上面使用的流的方式进行指定的。

 

 

 

至此，pdf.js插件的介绍就告一段落了，第一次写博客，如有不到之处，希望大家可以不吝赐教，谢谢！

在此感谢pdf.js的两位作者！（真心佩服这些外国大师，2个人可以写一个这么好的框架，而且还是开源的！）。

感谢hyhbyl先生！他的文章指引了我！附网址一份：

http://blog.youkuaiyun.com/hyhbyl/article/details/20994945