pdf.js 的使用

现在的浏览器基本都支持直接把 pdf 文件拖到浏览器就可以打开，不用下载pdf阅读插件，但是在写网页的时候遇到了 pdf 文件怎么办呢，有两种解决办法，一种是用 falsh 来向用户展示，优点就是支持所有的浏览器，缺点是需要用户安装falsh插件，另一种就是用 pdf.js 插件来展示，优点是不用下载falsh插件，缺点就是兼容性问题，不支持IE9 及以下的浏览器。

我现在重点介绍的就是 pdf.js 插件，我最近也在用。

下载地址 pdf.js 里面有 Download Demo GitHub Preject，直接下载就可以

目录结构

|-build

|    |-pdf.js

|    |-pdf.worker.js

|-web

|    |-cmaps

|    |-images

|    |-locale

|    |-compatiblity.js

|    |-debugger.js

|    |-l10n.js

|    |-viewer.css

|    |-viewer.html

|    |-viewer.js

需要将这个文件放到apach的服务器里面打开

打开后我们就能看到效果了，如果想要打开别的文件，在viewer.js里面将 DEFAULT_URL 改成你想要的路径就可以了，那么问题来了，如果改成线上的pdf文件就会报错

pdf.js 的使用

这个错误是说你打开的协议与url的协议不匹配，因为你本地打开是用的file协议，这也是他的一个安全措施

要解决这个问题很简单，那就是把6459行的代码块注释掉

/*var fileOrigin = new URL(file, window.location.href).origin;

     if (fileOrigin !== viewerOrigin) {

      throw new Error('file origin does not match viewer\'s');

     }*/

这样就好了

相关文章