Embed data into PDF forms using JavaScript

Nutrient Web SDK allows you to save the data your customer fills your PDF forms with so that the forms can be loaded later.

Out of the box, nutrientviewer.instance#save will save all changes to a PDF, including any forms that have been filled in. Afterward, you can use the nutrientviewer.instance#exportPDF method to export the PDF with these changes:

// Standalone mode: saves and exports PDF on form field changes
NutrientViewer.load({
  document: document
}).then((instance) => {
  // Every time a user makes a change, save the document to create a snapshot that can be
  // uploaded somewhere.
  //
  instance.addEventListener("formFieldValues.update", async (formFieldValues) => {
    try {
      await instance.save();
      const pdf = await instance.exportPDF();


      // The code to upload this PDF with the saved data goes here.
    } catch (error) {
      console.error("Failed to save or export PDF:", error);
    }
  });
});

Performance tip: When saving on every form field update as shown above, consider implementing debouncing or throttling to avoid excessive save operations, especially for forms with many fields or when network latency is a concern. A typical debounce delay of 500-1000ms works well for most use cases.

Autosaving

Nutrient Web SDK can handle automatically saving after each change so that a PDF is ready to be exported.

You can read more about this in the autosaving guide.