如何使用Vue和PDF.js实现PDF预览并添加水印？

本文共计2077个文字，预计阅读时间需要9分钟。

%E5%AE%9E%E7%8E%B0%E6%95%88%E6%9E%9C：Mozilla%E6%8F%90%E4%BE%9B%E4%BA%86PDF.js%E5%92%8Cpdfjs-dist%E4%BB%A5%E7%9B%B4%E6%8E%A5%E6%9F%A5%E7%9C%8BPDF%E6%96%87%E4%BB%B6。

%E5%8F%AF%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%BB%8D：- PDF.js：一个完整的PDF查看器，支持viewer.直接查看PDF内容，包括完整样式和相关功能。- pdfjs-dist：提供PDF.js的模块化版本，方便在项目中使用。

实现效果

可用插件介绍

Mozilla 提供了 PDF.js 和pdfjs-dist ，两者的区别如下：

• PDF.js ，一个完整的 PDF 查看器，可以直接使用其提供的 viewer.html 查看 PDF 内容，包含完整样式和相关功能。优点是快速集成，不需要自己实现查看器的功能和样式。缺点是如果要自定义样式和功能，反而会很麻烦。
• pdfjs-dist ，PDF.js 的预购建版本，只包含 PDF 内容的渲染功能，需要自己实现查看器的样式和相关功能。

Vue 官方插件库 Awesome Vue.js 推荐的vue-pdf 就是对 pdfjs-dist 进行了封装实现，一般情况下使用 vue-pdf 即可快速实现 PDF 的预览效果。

根据需求进行插件选型

我们的需求是在现有页面中实现 PDF 预览的同时，在 PDF 内容上添加水印。