SoFunction
Updated on 2025-04-14

Use implementation to splice two pdf files and add watermark

Installation dependencies

npm install --save pdf-lib

Import and use in code

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'
// Splice the uploaded cover pdf and pdf made by pdfmakeconst mergedPdf = await ()
// Cover test.pdf file can also be used in the public folder.const bytes1 = await ('Cover Test.pdf')
const pdf1 = await (bytes1)

// Add a font to the doc
const helveticaFont = await ()

const pdfDocGenerator = await (docDefinition)

// Get the arraybuffer of pdf made by pdfmakeawait (async buffer => {
  const pdf2 = await (buffer)

  const copiedPagesA = await (pdf1, ())
  ((page) => {
    // Add name information on the cover    ('Cover Name: 111', {
      x: () / 2 - (('Cover Name: 111', 32) / 2),// center the text      y: 580,
      size: 32,
      font: helveticaFont,
      color: rgb(0, 0.53, 0.71)
    })
    (page)
  })
  const copiedPagesB = await (pdf2, ())
  ((page) => (page))

  const mergedPdfFile = await ()
  
  // Download to local  const url = (new Blob([]))
  const link = ('a')
   = url
  ('download', '')
  (link)
  ()
})
// Get the file arraybufferreadFileAsync(file_url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    ('get', file_url, true)
     = 'blob'
     = function() {
      if ( === 200) {
        const reader = new FileReader()
         = () => {
          resolve()
        }
         = reject
        ()
      }
    }
    ()
  })
},

Add watermark to each page

Modify the above code

// const mergedPdfFile = await ()

// Add watermark and download(mergedPdf, 'Watermark water', filename)
// Download to local// const url = (new Blob([]))
// const link = ('a')
//  = url
// ('download', filename + '.pdf')
// (link)
// ()
// Add watermarkasync addCanvasWatermark(pdfDoc, text, filename) {
  // Load custom fonts, here are the custom fonts in pdfmake  const fonturl = require('pdfmake/examples/fonts/')
  const fontBytes = await fetch(fonturl).then((res) => ())

  // Custom font mount  (fontkit)
  const customFont = await (fontBytes)

  // Add text watermark to each page of pdf  const pages = ()
  // Text rendering configuration  const drawTextParams = {
    lineHeight: 50,
    font: customFont, // Custom fonts are used here    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 < ; i++) {
    const page = pages[i]

    // Get the current page width and height    const { width, height } = ()

    // Text content to render    // const text = 'water 121314'

    for (let ix = 1; ix < width; ix += 230) { // Horizontal interval of watermarks      let lineNum = 0
      for (let iy = 50; iy <= height; iy += 110) { // vertical spacing of watermarks        lineNum++

        (text, {
          x: lineNum & 1 ? ix : ix + 70,
          y: iy,
          ...drawTextParams
        })
      }
    }
  }
  
  // Serialize to bytes and download to local  const pdfBytes = await ()
  (pdfBytes, filename)
},
// Download to localdownload(mergedPdfFile, filename) {
  const url = (new Blob([]))
  const link = ('a')
   = url
  ('download', filename + '.pdf')
  (link)
  ()
}

This is the article about using the implementation of splicing two pdf files and adding watermarks. For more related pdf-lib splicing files and adding watermarks, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!