Hopding / pdf-lib

Create and modify PDF documents in any JavaScript environment
https://pdf-lib.js.org
MIT License
6.6k stars 635 forks source link

Filled fields in additional pages do not render in Acrobat, but work fine in chrome. #1615

Open turbo2ltr opened 4 months ago

turbo2ltr commented 4 months ago

What were you trying to do?

I have a one page fillable PDF document (a roster list) that I use PDF-LIB to fill in with the list of people that have RSVPd. No problem. Sometimes I need multiple pages if there are more than x number of people. Since I only have one template document, I create multiple pdf-lib documents and fill in each one separately. Then I create a new blank master document and merge all the individual pages into the master using copyPages. When viewed in Chrome based browsers, the document is as expected.
When viewed in Adobe Reader, the first page is filled out, the rest of the pages, the PDF is there, but all the fields are blank.

How did you attempt to do it?

Overall approach was:

What actually happened?

The code works. It generates a PDF. But the PDF renders differently in Adobe than other readers. In Chrome and Foxit, the PDF has all pages and all fields on all pages are properly filled In Adobe, the first page has a fully filled PDF, but any additional pages have the original template PDF, but none of the field data is displayed.

What did you expect to happen?

I expected the PDF to show all the fields on all readers.

How can we reproduce the issue?

Some simplified pseudo code.

var { PDFLib } = globalThis;
const response = await fetch(url);    // URL of template PDF
const blob = await response.blob();
const arrayBuffer = await new Response(blob).arrayBuffer();
const templateByteArray = new Uint8Array(arrayBuffer);     // store it for later

// [determine the number of pages I need]
// for each page needed
 {
     pdfDocArray[pageNumIndx] = await PDFLib.PDFDocument.load(templateByteArray);
     formArray[pageNumIndx] = pdfDocArray[pageNumIndx].getForm();

     // fill in the fields
     formArray[pageNumIndx].getTextField('Location').setText("somewhere");
     ...
}

// merge them together
const pdfDocMaster = await PDFLib.PDFDocument.create()

// for each page added
{
     const pdfBytes1 = await pdfDocArray[pageNumIndx].save();
     const pdfDoc2 = await PDFLib.PDFDocument.load(pdfBytes1);
     pdfDocArray[pageNumIndx] = pdfDoc2;

     const [TmpPage] = await pdfDocMaster.copyPages(pdfDocArray[pageNumIndx], [0]); // copy the filled in page to the new doc
     await pdfDocMaster.addPage(TmpPage);
     pageNumIndx++;
}

Version

1.17.1

What environment are you running pdf-lib in?

Browser

Checklist

Additional Notes

No response

jeffmikan commented 3 weeks ago

Note, up until recently, my work around for this was to Rename the Form Fields on each page to include the page number. Page 1 Field "Name" => renamed to Name1 Page 2 Field "Name" => Name2 Rename is done before the copy over.

Note: This has issues with radio buttons.

Note 2: Recent Edge PDF reader update, now doesn't display field data. Not sure if related, still troubleshooting