这篇文章主要为大家详细介绍了如何使用pdf-lib.js实现拼接两个pdf文件并添加水印,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下 
安装依赖
npm install --save pdf-lib
代码中导入及使用
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'// 拼接已上传的封面pdf 和 pdfmake制作的pdfconst mergedPdf = await PDFDocument.create()// 封面测试.pdf文件在public文件夹下，也可以使用urlconst bytes1 = await this.readFileAsync('封面测试.pdf')const pdf1 = await PDFDocument.load(bytes1)// Add a font to the docconst helveticaFont = await pdf1.embedFont(StandardFonts.Helvetica)const pdfDocGenerator = await pdfMake.createPdf(docDefinition)// 获取pdfmake制作的pdf的arraybufferawait pdfDocGenerator.getBuffer(async buffer => { const pdf2 = await PDFDocument.load(buffer) const copiedPagesA = await mergedPdf.copyPages(pdf1, pdf1.getPageIndices()) copiedPagesA.forEach((page) => { // 封面添加名称信息 page.drawText('Cover Name: 111', { x: page.getWidth() / 2 - (helveticaFont.widthOfTextAtSize('Cover Name: 111', 32) / 2),// 使文字居中 y: 580, size: 32, font: helveticaFont, color: rgb(0, 0.53, 0.71) }) mergedPdf.addPage(page) }) const copiedPagesB = await mergedPdf.copyPages(pdf2, pdf2.getPageIndices()) copiedPagesB.forEach((page) => mergedPdf.addPage(page)) const mergedPdfFile = await mergedPdf.save() // 下载到本地 const url = window.URL.createObjectURL(new Blob([mergedPdfFile.buffer])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'test.pdf') document.body.appendChild(link) link.click()})// 获取文件arraybufferreadFileAsync(file_url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('get', file_url, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status === 200) { const reader = new FileReader() reader.onload = () => { resolve(reader.result) } reader.onerror = reject reader.readAsArrayBuffer(this.response) } } xhr.send() })},每一页加水印
修改上面的代码
// const mergedPdfFile = await mergedPdf.save()// 加水印、下载this.addCanvasWatermark(mergedPdf, '水印water', filename)// 下载到本地// const url = window.URL.createObjectURL(new Blob([mergedPdfFile.buffer]))// const link = document.createElement('a')// link.href = url// link.setAttribute('download', filename + '.pdf')// document.body.appendChild(link)// link.click()// 添加 水印async addCanvasWatermark(pdfDoc, text, filename) { // 加载自定义字体，这里用的是pdfmake中自定义的字体 const fonturl = require('pdfmake/examples/fonts/FZYTK.ttf') const fontBytes = await fetch(fonturl).then((res) => res.arrayBuffer()) // 自定义字体挂载 pdfDoc.registerFontkit(fontkit) const customFont = await pdfDoc.embedFont(fontBytes) // 为每页pdf添加文字水印 const pages = pdfDoc.getPages() // 文字渲染配置 const drawTextParams = { lineHeight: 50, font: customFont, // 这里使用的是自定义字体 size: 12, color: rgb(0.46, 0.53, 0.6), // rgb(0.08, 0.08, 0.2), rotate: degrees(15), opacity: 0.2 } for (let i = 0; i < pages.length; i++) { const page = pages[i] // 获取当前页宽高 const { width, height } = page.getSize() // 要渲染的文字内容 // const text = 'water 121314' for (let ix = 1; ix < width; ix += 230) { // 水印横向间隔 let lineNum = 0 for (let iy = 50; iy <= height; iy += 110) { // 水印纵向间隔 lineNum++ page.drawText(text, { x: lineNum & 1 ? ix : ix + 70, y: iy, ...drawTextParams }) } } } // 序列化为字节，并下载到本地 const pdfBytes = await pdfDoc.save() this.download(pdfBytes, filename)},// 下载到本地download(mergedPdfFile, filename) { const url = window.URL.createObjectURL(new Blob([mergedPdfFile.buffer])) const link = document.createElement('a') link.href = url link.setAttribute('download', filename + '.pdf') document.body.appendChild(link) link.click()}
