pdf.js的使用

iframe

在不使用插件的情况下，在线预览 PDF、PPT、Word 文件，大都可以直接使用 iframe 标签来嵌套，且提供的工具也相当丰富（上下页切换、全屏、下载、跳转到指定页数等），需要注意的是，在全屏模式下，展示的内容不能进行复制，且展示的最大高度是等于当前文档内容的高度（如果文档内容高度小于当前窗口的高度，那么多余的部分会以黑色背景铺满剩余的空间）。

优点：操作简单，一个标签即可解决展示的问题 

缺点：低版本浏览器需要下载阅读器插件以及在不同浏览器下面文档的展示形式也不同（Safari 最明显），不支持事件对文档的操作

pdf.js

为了保证在不同浏览器下面的展示统一，这时可以考虑使用 mozilla 的 pdf.js 插件，在保持原有功能展示和统一了界面样式之外，还支持通过事件来操作文档，如通过事件控制上下页切换、全屏、跳转到指定页数等。

优点：在原有功能的基础上增加了事件的支持，样式也进行了统一

缺点：访问资源只能是同源（哪怕服务器设置了文档任何域都可以访问）插件还是会报错提示跨域的问题，文件体积过大

pdf.js 使用方法

1、先官网下载插件（npm、CDNs）

//npm
npm install pdfjs

//cdns
www.jsdelivr.com/package/npm/pdfjs-dist
cdnjs.com/libraries/pdf.js
unpkg.com/pdfjs-dist/

 

2、本地运行（基于引入js方式使用）

下载文件到本地之后，会有两个文件夹（web、build）其中内容展示的核心文件是 web/viewer.html，因为浏览器有同源策略，所以如果直接在本地浏览器打开 viewer.html 那么会发现页面什么也没有，最快的方法可以使用 http-server 来本地启动一个服务（http-server 简单使用方法在文章末尾处），启动服务之后，再次刷新页面，文档内容就能正常显示了（展示的文档内容是基于当前下载的 PDF 文件同级目录下面的 pdf文件）

 

3、动态修改 pdf 文件

以本地为例

192.168.1.6:8080/web/viewer.html?file=test.pdf

以上链接可以划分为两部分

第一部分以192.168.1.6:8080/web/viewer.html为主的展示页面

第二部分以?file=test.pdf 为主的文档内容，test.pdf 为当前所处服务器目录下的文件（需要注意文件的路径）

192.168.1.6:8080/web/viewer.html?file=a.pdf

192.168.1.6:8080/web/viewer.html?file=/web/ppt/b.pdf

192.168.1.6:8080/web/viewer.html?file=/static/file/c.pdf

 

4、使用过程中应当注意的问题

• 文档路径是否正确
• 是否使用其它域的文档数据
• 文件未展示且浏览器也没有报任何错误（需要考虑文档是否过大，导致下载很缓慢）

 

* 关于 http-server 的使用方法，可以参考如下（需要配合node）

1、进入需要启动服务器的目录

2、npm install

3、npm http-server

4、http-server

 

• 官网 pdf.js
• githu pdf.js
• 文档 pdf.js