JAVA根据PDF比例设置水印字体大小 前端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.embedFont(PDFLib.StandardFonts.Helvetica)
	// 获取每一页
	const pages = pdfDoc.getPages()
	// 获取每一页的宽高
	const { width, height } = pages[0].getSize()
	// 遍历每一页的数据给每一页都添加水印
	pages.forEach(item => {
    item.drawText('I can do it!!!', {
        // 出现的 x 轴坐标
        x: 520 / 2,
        // 出现的 y 轴坐标
        y: height / 2 + 300,
        // 字体大小
        size: 30,
        // 字体
        font: helveticaFont,
        // 颜色
        color: PDFLib.rgb(0, 0, 0),
        // 倾斜角度
        rotate: PDFLib.degrees(-45),
        // 透明度
        opacity: 0.5
    	})
	})
	// 已经处理好的数据
	const pdfBuffer = await pdfDoc.save()
	// 返回出去
	return pdfBuffer
}

将这个函数添加进，viewer.js中。
然后修改 viewer.js 中 webViewerOpenFileViaURL 函数 修改为以下这样

async function webViewerOpenFileViaURL(file) {
    // 在这里我们执行写的函数拿到处理好的数据
    // modifyPdf 因为我们写的这个函数是异步函数，所以返回的是promise我们把当前函数也变成异步函数
    const fileData = await modifyPdf() // 用 await 修饰之后就可以拿到修改过后的
    if (file) {
        PDFViewerApplication.open(fileData);
    }
}

此时打开会发现实现了水印的功能

6.此时，它只支持英文的水印，这不能忍啊。

这时候我们只需要修改之前写的函数注入一个中文字体就好了。因为PDF-LIB注入中文，需要一个包。这里同样用CDN引入

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

添加一个字体到项目中。支持中文的就可以啦。

这里我用的是汉体。修改函数为=>

async function modifyPdf() {
    // URL 这个是要请求的地址 这里我挂载到自己的服务器会跨域 所以用本地直接引入的方式
    const url = '../static/小红书(第四版).pdf'
    // 字体的路径 同样可为网络地址 
    const fontUrl = '../static/DENG.TTF'
    // 请求地址并变成arrayBuffer
    const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())
    // 请求地址并把字体文件变成arrayBuffer
    const fontBuffer = await fetch(fontUrl).then(res => res.arrayBuffer())
    const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes)
    // 注入字体
    pdfDoc.registerFontkit(fontkit)
    const customFont = await pdfDoc.embedFont(fontBuffer)
    // 加载字体 官方的字体 均不支持中文水印 但可以注入中文字体 自己定义了字体这个不需要了
    // const helveticaFont = await pdfDoc.embedFont(PDFLib.StandardFonts.Helvetica)
    // 获取每一页
    const pages = pdfDoc.getPages()
    // 获取每一页的宽高
    const { width, height } = pages[0].getSize()
    // 遍历每一页的数据给每一页都添加水印
    pages.forEach(item => {
        item.drawText('I can do it!!!', {
            // 出现的 x 轴坐标
            x: 520 / 2,
            // 出现的 y 轴坐标
            y: height / 2 + 300,
            // 字体大小
            size: 30,
            // 字体
            // font: helveticaFont,
            font: customFont, // 用自己注入的字体
            // 颜色
            color: PDFLib.rgb(0, 0, 0),
            // 倾斜角度
            rotate: PDFLib.degrees(-45),
            // 透明度
            opacity: 0.5
        })
        item.drawText('勇敢牛牛，不怕困难', {
            // 出现的 x 轴坐标
            x: 520 / 2,
            // 出现的 y 轴坐标
            y: height / 2 + 200,
            // 字体大小
            size: 30,
            // 字体
            // font: helveticaFont,
            font: customFont, // 用自己注入的字体
            // 颜色
            color: PDFLib.rgb(0, 0, 0),
            // 倾斜角度
            rotate: PDFLib.degrees(-45),
            // 透明度
            opacity: 0.5
        })
    })
    // 已经处理好的数据
    const pdfBuffer = await pdfDoc.save()
    // 返回出去
    return pdfBuffer
}

其他不用变，此时

此时中文的水印也实现了。

7.解决一些问题 PDF及水印可以选中的问题

只需要在viewer.html中加入样式

<style>
    * {
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>

加入这写CSS样式后页面的水印和内容就不可以选中啦。
可以在此基础上进行修改适合自己的业务逻辑。比如用后台的地址，而不是前端的路径。和PDF相爱相杀一晚上的成果…卑微前端…