前端实现在线预览PDF，水印方案，真水印哦。

前端实现PDF预览，并且加水印

公司要做一个PDF预览并且加水印的功能，思考的很久，找了很久的资料，但是没有一篇文章给我完整的解决方案。一般都是用假的水印…发现了 pdf-lib 可以操作 pdf 文件，pdf.js可以预览文件。于是把两个东西组合起来实现了，在后端的帮助下，前端加水印并且预览。想把自己解决这个问题的历程写下来，帮助更多的开发者。

1.准备

实现这个功能需要两个包
PDFJS下载地址
PDF-LIB官网

2.开搞

下载PDFJS的项目目录，然后就用这个开发就好了。集成进Vue项目也是一样。

3.此时以CDN的方式在Viewer.html引入PDF-LIB

 <script src="https://unpkg.com/pdf-lib"></script>

4.更改viewer.js源码

这个defaultUrl就是要打开的pdf文件的地址。我们要请求完这个文件之后用PDF-LIB操作这个PDF文件，然后把数据交给PDFJS渲染。

观察viewer.js源码，发现这个方法是用来打开，请求来的数据的。也就是说，在这个之前，我们可以通过PDF-LIB操作PDF文件然后把操作完毕之后的数据传递给它，然后渲染，也就是加完水印之后给它渲染。

5.根据PDF-LIB这个包，封装函数，返回需要的数据

往目录里加一个PDF文件方便测试，可以用网络地址，但要处理好跨域。

async function modifyPdf() {
   
// URL 这个是要请求的地址 这里我挂载到自己的服务器会跨域 所以用本地直接引入的方式
	const url = '../static/小红书(第四版).pdf' // 根据自己的路径调整
	// 请求地址并变成arrayBuffer
	const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())
	const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes)
	// 加载字体 官方的字体 均不支持中文水印 但可以注入中文字体
	const helveticaFont = await pdfDoc.