Flatten Dynamic PDF Forms Using JavaScript

The process of flattening form fields consists of rendering them over the background of a page with their current value and removing their data from the document, similar to how annotations are flattened.

When a form field is flattened, it’s removed from a document, along with its widget annotations, while its visual representation is kept intact: A flattened form field is still visible but no longer editable by your users or by your app.

This can be used, for example, to permanently apply form fields to your document, or to make form fields visible to viewers that otherwise can’t show annotations (like Safari on iOS). If not specified, an export will keep all annotations as they are.

To change how annotations are exported, use instance#exportPDF. This method accepts a flatten option:

const content = await instance.exportPDF({ flatten: true });
console.log(content); // => ArrayBuffer of document with flattened form fields

If the Document Editor component is present in your license, you can also flatten form fields and their widget annotations by specifying the corresponding flattenAnnotations operation. If the pageIndexes property is provided, the operation will only affect widget annotations on the specified pages:

await instance.applyOperations([
  {
    type: "flattenAnnotations",
    pageIndexes: [0] // Flatten only form fields on page 0.
  }
]);

Flattening and importing a document where treatImportedDocumentAsOnePage is true in the same operations batch isn’t supported and will raise an error.