Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Importing and exporting annotations

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer that has limited capabilities compared to PDF.js Express Pro

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a paid product that supports annotating, signing, form filling and more

Annotations can be serialized into an XFDF string, which can then be stored in a database, file, or anywhere else you can store strings. Then, that string can be reimported into the viewer at a future date.

Exporting annotations

Annotations can be exported with the annotationManager.exportAnnotations API. This API returns a promise which resolves to a string which can then be stored in a database or any other data storage system.

const xfdfString = await instance.Core.annotationManager.exportAnnotations();

// Save to your database
await saveToDatabase(xfdfString)

This XFDF string can then be imported in the future.

Importing annotations

Importing annotations means taking an XFDF string (usually retrieved from the exportAnnotations API shown above), and loading those annotations into the viewer.

This can be done with the annotationManager.importAnnotations API.

// Get the annotations from your database
const xfdfString = await loadAnnotationsFromDatabase()

await instance.Core.annotationManager.importAnnotations(xfdfString);

Example

Below is an example of a common workflow involving saving and loading annotations:

import WebViewer from '@pdftron/pdfjs-express'

const saveButton = document.getElementById('custom-save-button')

WebViewer({...options}).then(instance => {

  // Some ID for the document. In this case we load document '123'
  const docId = '123';

  // Load "123.pdf"
  instance.UI.loadDocument(`/files/${docId}.pdf`);

  // After the document is loaded, we load the annotations from the database
  // and then import them into the viewer
  instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
    const xfdfString = await loadXFDF(docId)
    await instance.Core.annotationManager.importAnnotations(xfdfString);
  });


  // When our "save" button is clicked, we export 
  // the annotations and save them to our database
  saveButton.onclick = () => {
    const xfdfString = await instance.Core.annotationManager.exportAnnotations();
    await saveToDatabase(docId, xfdfString)
  }

})