Importing and Exporting Annotations with Web Server-Backed

When you use PSPDFKit for Web in server-backed operational mode, all of a document’s annotations are imported from Document Engine when you open it. When you create new annotations or update existing annotations via the UI or the API, the changes are exported to Document Engine as well. This process is transparent to you and your users. You can control when the annotations are saved by changing the auto-save mode.

With Instant, changes made to annotations are automatically synchronized between all the connected users, enabling real-time collaboration capabilities in your application.

Instant JSON

You can export and import annotations to and from documents opened from Document Engine in the Instant JSON format.

To export the annotations, use the PSPDFKit.Instance.exportInstantJSON method. For example, to print out the opened document’s Instant JSON to the console, you can run:

const instantJSON = await instance.exportInstantJSON();
console.log(instantJSON);

You can also import annotations in the Instant JSON format to the currently open document using the PSPDFKit.Instance.applyOperations API:

await instance.applyOperations([
  { type: "applyInstantJson", instantJson: instantJson }
]);

In this example, the instantJson variable is an Instant JSON object — for example, the result of parsing a JSON string with JSON.parse.

Note that calling PSPDFKit.Instance.applyOperations forces a document reload. To avoid this, you can also import annotations from Instant JSON when you upload a document to Document Engine, or any time during the document lifecycle. See the guide on importing and exporting Instant JSON with Document Engine for more information.

XFDF

PSPDFKit for Web Server-Backed also supports exporting and importing annotations in the XFDF format.

To export the annotations, use the PSPDFKit.Instance.exportXFDF method. For example, to print out the opened document’s XFDF file to the console, run:

const xfdf = await instance.exportXFDF();
console.log(xfdf);

You can also import the annotations as XFDF to the currently open document using the PSPDFKit.Instance.applyOperations API:

await instance.applyOperations([
  { type: "applyInstantXfdf", xfdf: xfdf }
]);

In this example, the xfdf variable is an XFDF string.

Note that calling PSPDFKit.Instance.applyOperations forces a document reload. To avoid this, you can also import annotations from XFDF when you upload a document to Document Engine, or any time during the document lifecycle. See the Document Engine import and export guide for more information.