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('');
const { firstName, lastName } = await profileResponse.json();
// Insert the form field values into Instant JSON.
const instantJSON = {
  format: "",
  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 run a Server-backed deployment, see this guide to learn how to fill the form fields with PSPDFKit Server.

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();
// => { firstNameField: "John", lastNameField: "Appleseed" }

We use cookies to improve your experience and for marketing. Learn more in our privacy policy.