pdf-lib.js拼接两个pdf文件、加水印

安装依赖

npm install --save pdf-lib

代码中导入及使用

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'

// 拼接已上传的封面pdf 和 pdfmake制作的pdf
const mergedPdf = await PDFDocument.create()
// 封面测试.pdf文件在public文件夹下，也可以使用url
const bytes1 = await this.readFileAsync('封面测试.pdf')
const pdf1 = await PDFDocument.load(bytes1)

// Add a font to the doc
const helveticaFont = await pdf1.embedFont(StandardFonts.Helvetica)

const pdfDocGenerator = await pdfMake.createPdf(docDefinition)

// 获取pdfmake制作的pdf的arraybuffer
await 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()
})

// 获取文件arraybuffer
readFileAsync(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()
}