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

[turbo2ltr]

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:

• create multiple PDF-LIB objects from the single template.
• Fill in the fields for each PDF
• Create a new blank master PDF
• Merge all the pages into the master document
• Have the user download it and view in whatever reader that have available. Sometimes that's directly in the browser, sometimes that is Adobe, sometimes it's Foxit, etc.

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

• My report includes a Short, Self Contained, Correct (Compilable) Example.
• I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

No response

[jeffmikan]

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

[jeffmikan]

Follow up:
With the new Edge Acrobat Reader, one hack that was working is to "copy field by field" and place new field in the same location with the value set. This worked for base 1 page form becoming multi-page form. I am still working through this to do Multi-Page forms to Mega-Multipage form.

Note: If you use the edge Acrobat Reader to Print to pdf/printer, entries are there.
Also, Flatting the form also makes it work (not the solution, but a possible workaround)

[jeffmikan]

So found a solution that covers 1 page form into multi-page form and multi=>multi

I built a "Copy Form" Function

1. It goes through each form field in the source
2. Get's the Form field's rectangle
   const sourceAnnotation = PDFAnnotation.fromDict(field.acroField.dict); const sourceRect = sourceAnnotation.getRectangle();
3. Creates a new Field in the new form and update the Rect of the new field
   const newField = toForm.createTextField(name); newField.addToPage(destPage, { x: sourceRect.x, y: sourceRect.y, width: sourceRect.width, height: sourceRect.height, textColor: rgb(0, 0, 0) }); const currentAnnotation = PDFAnnotation.fromDict(newField.acroField.dict); currentAnnotation.setRectangle(sourceRect); newField.setText(value);
   Note: you must manage copying to the correct page outside of this.

I have only tested this with text fields.

Hopefully, this will help someone