Import Data into PDFs from a Database

With PSPDFKit for Web, you can easily fill in the form fields using the data stored in your database as soon as you open a document. You just need to make sure you expose that data to your application over HTTP.

For example, assume your backend application exposes a /profile endpoint that returns the current user’s profile information, including the first name and the last name. That data is returned in a JSON format, like this:

{
  "firstName": "John",
  "lastName": "Appleseed"
}

If you want to prefill the first name and the last name in the document that the user opens, insert the form field values into the Instant JSON object and import it when the document is opened:

// This loads the profile information from your server which, in turn, imports it from the database.
const profileResponse = await fetch('https://your-server.example.com/profile');
const { firstName, lastName } = await profileResponse.json();
// Insert the form field values into Instant JSON.
const instantJSON = {
  format: "https://pspdfkit.com/instant-json/v1",
  formFieldValues: [
    { v: 1, type: "pspdfkit/form-field-value", name: "firstNameField", value: firstName },
    { v: 1, type: "pspdfkit/form-field-value", name: "lastNameField", value: lastName }
  ]
}
// Open a document and immediately import Instant JSON into it.
const instance = PSPDFKit.load({ instantJSON: instantJSON, /* required options */ });

Note that this approach only works with PSPDFKit for Web Standalone. If you use Server-Backed mode, see this guide to learn how to fill the form fields.

This example assumes there are form fields in the document called firstNameField and lastNameField. If you want to retrieve the information about what form fields are present in the document and what their current values are, you can use the PSPDFKit.Instance.getFormFieldValues method:

const formFieldValues = instance.getFormFieldValues();
console.log(formFieldValues);
// => { firstNameField: "John", lastNameField: "Appleseed" }