Importing and exporting annotations in a database

Nutrient Web SDK enables you to export annotation changes to a separate file, store that file in your database, and import it later to restore those changes. This method avoids saving or transferring the entire PDF. Instead, it only processes the annotation data, which reduces network load and improves performance.

If you use Nutrient Web SDK with Document Engine, annotation changes are saved automatically to the backend. When you reopen the document, the annotations are loaded without transferring the full PDF file to the client.

If you’re using Web SDK without Document Engine, export annotations using either Instant JSON or XML Forms Data Format (XFDF).

Exporting and importing Instant JSON from the database

To export all annotation changes to Instant JSON, you first need to make sure they’re saved. One option is to use the PSPDFKit.Instance.save method to wait for all the changes to be saved and only then export Instant JSON:

await instance.save();
const instantJSON = await instance.exportInstantJSON();
// This saves the Instant JSON to your server, which in turn stores it in a database.
await fetch("https://your-server.example.com/instant-json", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(instantJSON)
});

Alternatively, use the annotations.didSave event to export the Instant JSON to the database as soon as any annotation changes are made:

instance.addEventListener("annotations.didSave", async () => {
  const instantJSON = await instance.exportInstantJSON();
  // This saves the Instant JSON to your server, which in turn stores it in a database.
  await fetch("https://your-server.example.com/instant-json", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(instantJSON)
  });
});

To import the annotations saved as Instant JSON when opening the document, pass the Instant JSON object in the configuration to the PSPDFKit.load:

// This loads the Instant JSON from your server, which retrieves it from the database.
const response = await fetch("https://your-server.example.com/instant-json");
const instantJSON = await response.json();
PSPDFKit.load({
  // required options..
  instantJSON: instantJSON
});

The instantJSON option is supported when using Web SDK without Document Engine.

The benefit of using Instant JSON over the XFDF format is that Instant JSON represents the changes made to annotations, whereas XFDF is a complete snapshot of all the annotations in a document. For documents that originally contained a lot of annotations, Instant JSON might greatly reduce the required bandwidth.

Exporting and importing XFDF from the database

To export all annotations to XFDF, make sure any changes made are saved first. One option is to use the PSPDFKit.Instance.save method to wait for all the changes to be saved, and only then export XFDF:

await instance.save();
const xfdf = await instance.exportXFDF();
// This saves the XFDF payload to your server, which in turn stores it in a database.
await fetch("https://your-server.example.com/xfdf", {
  method: "POST",
  body: xfdf
});

Alternatively, use the annotations.didSave event to export the XFDF to the database as soon as any annotation changes are made:

instance.addEventListener("annotations.didSave", async () => {
  const xfdf = await instance.exportXFDF();
  // This saves the XFDF payload to your server, which in turn stores it in a database.
  await fetch("https://your-server.example.com/xfdf", {
    method: "POST",
    body: xfdf
  });
});

To import the annotations saved as XFDF when opening the document, pass the XFDF payload in the configuration to the PSPDFKit.load:

// This loads the XFDF payload from your server, which retrieves it from the database.
const response = await fetch("https://your-server.example.com/instant-json");
const xfdf = await response.text();
PSPDFKit.load({
  // required options..
  XFDF: xfdf
});

The XFDF option is supported when using Web SDK without Document Engine.