pdf.js使用教程(支持IE9以上)

最新推荐文章于 2024-06-15 13:50:25 发布

qq_26676207

最新推荐文章于 2024-06-15 13:50:25 发布

阅读量2w

点赞数 4

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>

效果图，如下：