在 Vue 中集成pdf-lib ，实现给 PDF文件 添加水印

需求详解

前端下载或预览 PDF 文件的时候，需要加上水印，用于保护机密信息并表明法律文件的有效性

插件介绍

pdf-lib :在任何 JavaScript 环境中创建和修改 PDF 文档

官方文档:https://pdf-lib.js.org/

@pdf-lib/fontkit :因pdf-lib添加水印时默认不支持中文，所以必须自定义一个字体来显示中文水印

安装和插件引入

安装pdf-lib

如果使用npm或yarn作为包管理器：

# With npm
npm install --save pdf-lib
# With yarn
yarn add pdf-lib

UMD模块

如果不使用包管理器，UMD 模块可在unpkg和jsDelivr CDN 上使用：

• https://unpkg.com/pdf-lib/dist/pdf-lib.js

• https://unpkg.com/pdf-lib/dist/pdf-lib.min.js

• https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js

• https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js

安装pdf-lib/fontkit

# With npm
npm i --save @pdf-lib/fontkit
# With yarn
yarn add @pdf-lib/fontkit

UMD模块

• https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js

引入

import { degrees, PDFDocument, rgb } from 'pdf-lib'
import fontkit from '@pdf-lib/fontkit'

字体文件

文中所用的为本地字体文件，如有需要可自行去网上下载想要的字体

https://github.com/tkiapril/source-fonts (文中所用的)

实现代码(Vue)

import { degrees, PDFDocument, rgb } from 'pdf-lib'
import fontkit from '@pdf-lib/fontkit'

const addPdfWatermark = async (url: string) => {
        // 中文字体(可以是本地文件也可以是网络地址)
        const fontUrl = require('./sourceHanSansCN-Regular.ttf')
        // 请求地址并变成arrayBuffer
        const existingPdfBytes = await fetch(url).then((res) => res.arrayBuffer())
        // 请求地址并把字体文件变成arrayBuffer
        const fontBuffer = await fetch(fontUrl).then((res) => res.arrayBuffer())
        const pdfDoc = await PDFDocument.load(existingPdfBytes)
        // 注入字体
        pdfDoc.registerFontkit(fontkit)
        const customFont = await pdfDoc.embedFont(fontBuffer)
        const pages = pdfDoc.getPages()
        const { width, height } = pages[0].getSize()
        // 遍历每一页让所有pdf页面都添加水印
        pages.forEach((item) => {
          item.drawText('李三岁', {
            x: 5,
            y: height / 2 + 300,
            // 大小
            size: 50,
            // 字体
            font: customFont,
            // 文字颜色
            color: rgb(0, 0, 0),
            // 倾斜度
            rotate: degrees(-45),
            // 透明度
            opacity: 0.1
          }),
          item.drawText('这是一个水印', {
            x: 100,
            y: height / 2 + 300,
            size: 50,
            font: customFont,
            color: rgb(0.95, 0.1, 0.1),
            rotate: degrees(-45),
            opacity: 0.1
          })
        })
        // 此时文件已经转为blob数据形式 根据自己的需求进行文件预览或下载的转换
        const pdfBytes = await pdfDoc.save()
      }