pdf-lib.js - after merging multiple pdf files, filled data in form fields become invisible

Question

pdf-lib.js - after merging multiple pdf files, filled data in form fields become invisible

On individually viewing the files, everything is fine and the data just comes up fine.

The issue:

Example: If a pdf file has filled data(say abc.pdf) in it and after merging the pdf files to one single file, the merging is fine, but the filled data becomes invisible while viewing in the iframe. If we click on the field, it becomes visible.

Below is my code.

async function mergePDFDocuments(documents) {
  const mergedPdf = await PDFLib.PDFDocument.create();

  for (let document of documents) {
    
    let existingPdfBytes = await fetch(document).then(res => res.arrayBuffer())
    document = await PDFLib.PDFDocument.load(existingPdfBytes);

    const copiedPages = await mergedPdf.copyPages(document, document.getPageIndices());
    copiedPages.forEach((page) => mergedPdf.addPage(page));    
  }
  const pdfDataUri = await mergedPdf.saveAsBase64({
      dataUri: true
  });
  
  let iframe = document.createElement('iframe')
  iframe.setAttribute('style', 'width: 100%; height: 100%;')
  iframe.setAttribute('src', pdfDataUri)
  iframe.setAttribute('class', 'custom-pdf-frame')
  document.body.appendChild(iframe)
  
}

Basically it combines all the pdf files and sets the iframe src to the base64 string.

I opened abc.pdf in Acrobat Professional 8.1 and set the background color of a field to white and loaded the file in browser. That field showed the data just fine. Other fields showed their data only on clicking the field.

Not sure what I am missing in the code. Or is there an option to change the background color of the fields in the combined pdf file using pdf-lib.js?

Answer 1

Maybe Try:

const pdfDataUri = await mergedPdf.saveAsBase64({
      dataUri: true,
      updateFieldAppearances: true
  });

I use it like this:

var pdfBytes = await pdfDoc.save({
        updateFieldAppearances: true
    });