Fill PDF Forms Programmatically Using JavaScript

PSPDFKit for Web offers multiple options for filling form fields programmatically, each with a different set of tradeoffs.

  • Server-Backed Mode — For persisting, restoring, and synchronizing the form field values across multiple devices without needing to build this yourself.

  • XFDF — For exporting to or importing from other readers.

  • Instant JSON — For the most efficient way to export or import changes made.

  • Manual API — For full control over extracting and saving the values of the forms.

Server-Backed Mode

You can use the PSPDFKit for Server-Backed operational mode to not only serve your documents, but to store any changes a user has made to them — including the values of a form field.

Any time form fields are filled using the UI or the API, the changes are automatically sent and stored by the Server-Backed backend (Document Engine). When a document is opened from Document Engine, the latest form field values are immediately loaded.

If you use Instant, any form field changes made by any of the connected users will be immediately synchronized to all other users.

All you need to do is load the document:

PSPDFKit.load({
  container: "#pspdfkit",
  documentId: "DOCUMENT_ID_GOES_HERE",
  authPayload: { jwt: "YOUR_JWT_GOES_HERE" },
  instant: true // Sync changes between users who have same document open.
  // ...
});

Read more about this form filling method in the importing using Server-Backed guide.

XFDF

XFDF is the best format for when your application needs the ability to export a document’s annotations and form field values as XML that can be exported to or imported from other PDF readers.

XFDF enables interoperability with other PDF software, since it’s often used as an annotation and form field value export format by these tools. You could export form field values as XFDF from a PDF viewer application and then import them into PSPDFKit for Web.

You can prefill the form field values in a document by providing the content of the XFDF file when the document is opened:

PSPDFKit.load({
  XFDF: "CONTENT_OF_XFDF_FILE",
  XFDFKeepCurrentAnnotations: false // If `true`, importing an XFDF document won't replace any existing annotations.
  // ...
});

To export the XFDF, use Instance#exportXFDF to get a string containing the XFDF document, which you can then save:

const XFDF = await instance.exportXFDF();

The downside of using XFDF compared to Instant JSON is that it encodes a snapshot of all annotations and form field values in the document, whereas Instant JSON only represents a difference between the data in the file and the changes the user made. In the case of files with a lot of annotations and form fields, an Instant JSON payload can be significantly smaller than its XFDF equivalent.

Read more about form filling with XFDF in the importing from XFDF guide.

Instant JSON

Instant JSON is a data format that encodes annotations, bookmarks, and form field values in a compact JSON format. With PSPDFKit for Web Standalone, you can prefill the form field values in a document by providing the Instant JSON object when the document is opened:

PSPDFKit.load({
  instantJSON: theInstantJSONObject
  // ...
});

To export the InstantJSON, use Instance#exportInstantJSON to get a JSON object representing the InstantJSON:

const XFDF = await instance.exportInstantJSON();

You can easily fill in the form fields in a document with the data stored in your database or a backend application. Since Instant JSON is a documented data format, you can pull the form field values from your database, assemble an Instant JSON object, and pass it to PSPDFKit for Web when opening a document. This is a great approach when you want to integrate PSPDFKit for Web in an application where you already have existing data. Read our guide on importing from a database to learn more.

Using Instant JSON to fill in the form fields is an efficient way of restoring any form field value changes that a user made when working on a document last. Instead of saving and loading the whole document with changes, which might take a lot of space, you can export the Instant JSON file when the user finishes working on the document and import it when they open the document again.

Read more about this form filling method in the importing from Instant JSON guide.