Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

Vue 官方插件库 根据需求进行插件选型我们的需求是在现有页面中实现 PDF 预览的同时，在 PDF 内容上添加水印。可以通过传入 PDFJS.version 来提高引入的灵活性。在渲染页面时改变队列状态实现翻页函数在页面内容中添加平铺的文字水印前端添加水印的方式毋庸置疑都是使用 canvas 进行绘制。之后在 绘制作为水印的 canvas因为是组件，所以水印的文字 watermark 由外部传入。绘制水印的 canvas 不需要添加到页面中，绘制完成后直接将 DOM 元素返回即可，注意，返回的是 DOM 元素 ，而不是使用 getContext 获取的画布实例。ctx.fillStyle 表示文字的透明度。将水印平铺到渲染内容的 canvas 中该方法参考自 页面内容渲染完成后，再次触发水印渲染