详细|vue中使用PDF.js预览文件实践

---

theme: channing-cyan

highlight: a11y-dark

详细|vue中使用PDF.js预览文件实践

一、前言

文件预览的需求做过好几次了，在业内也算常见需求吧，今天小结一下使用 pdfjs 做文件预览功能的实践经验。有文件上传的功能就有可能有文件预览的需求，只是看做不做，而现实是文件上传，或说附件上传，在很多项目都有的功能，但是文件预览则可能没那么不多，实际上可以上传，那么附带文件预览应该是一个合理的附加需求，人们上传后想预览一下，看有没有上传错，这很正常。

但文件预览实现起来，可能要比文件上传存储要复杂一些些，而且涉及多种多样的文件类型，这大大加大了预览难度，这也可能是人们能不做文件预览则不做预览的原因之一。

事实上，我的实践经验中，在做技术调研的时候，发现似乎挺多插件能支持各种各样文件格式，但是本身实践不多，所以不谈那种“全能插件”，真有能兼容各种格式的，也欢迎读者们在评论区推荐，最好是自己实际项目中用的，效果不错，然后推荐，先说感谢分享实践经验了！

我的实践是，后端处理各种不同的格式文件，然后转换成 pdf 格式的，前端使用 pdfjs 实现预览功能。

二、PDF.js 简述

请特别注意，这里说的 Mozilla 支持的 PDF.js ，GitHub star 38k+的那个。

PDF.js 是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。由社区驱动并受 Mozilla 支持。我们的目标是创建一个通用的、基于 Web 标准的平台来解析和呈现 PDF。

了解到的 PDF.js 支持的功能：

• ①在线检索文档中的内容，并支持高亮显示，匹配大小写，统计匹配项等，在检索功能不错。
• ②指定页跳转，上下一页。
• ③下载当前预览文件。
• ④连接打印机打印当前预览文件。
• ⑤按比例缩放当前预览的文件，调整阅读视野。
• ⑥对当前预览的文件，开启在线演示模式。
• ⑦打开阅读本地pdf文件。
• ⑧支持大文件分片上传。
• ⑨支持在 viewer.html 添加水印。
• ⑩预览背景颜色等样式可在 viewer.html 中修改。

选用理由：

• ①浏览器兼容性较好
• ②预览阅读pdf文件功能完善，体验好
• ③文档示例多友好
• ④易上手，使用简单
• ⑤PC端移动端自适配很棒

下面是两张效果图

插件 github 地址 https://github.com/mozilla/pdf.js

插件 api 文档 https://mozilla.github.io/pdf.js/api/

三、使用过程

1.下载 PDF.js

到 https://mozilla.github.io/pdf.js/getting_started/ 页面中找到下载位置，下载 PDF.js

2.屏蔽跨域错误限制，允许跨域

在viewer.js 中检索到下面这段代码，注释掉，如果不注释，可能会出现跨域错误，无法正常预览文件。

js if (origin !== viewerOrigin && protocol !== "blob:") { throw new Error("file origin does not match viewer's"); }

3.安装 PDF.js 插件包到 vue 项目中

把下载到 PDF.js 放在vue项目中的 public 文件夹下。如果是早期版本的vue-cli脚手架放到 static 文件夹下。如果放在 src 文件下，可能不利于引入 viewer.html 进行预览。

4.在vue项目中创建预览路由地址

创建PDF文件夹，并创建 Index.vue 文件，配置相应的路由。

Index.vue 完整代码如下

```html

```

5.正式预览文件

打开上一步 PDF文件夹下 Index.vue 的路由地址，并携带像 文件id 这样的参数，结合 iframe 预览。实际上是利用 iframe 的src 嵌入 viewer.html 页面，这样就可以在 vue 中预览 pdf 文件了。

这里需要主要的是， iframe 的 src，请注意看 Index.vue。

PDF.js 文件结构一览

6.支持添加水印

可以在 viewer.html 中通过 watermark.init() 添加水印。

js // 水印文本 var txt = "测试水印"; watermark.init({ watermark_txt: txt, watermark_width: 200});

四、在线版 demo

下面是两个版本的在线版 demo

• 现代浏览器浏览: https://mozilla.github.io/pdf.js/web/viewer.html
• 旧版浏览器浏览：https://mozilla.github.io/pdf.js/legacy/web/viewer.html