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

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Import and export annotations using files

One of the options is to use XFDF files to save and load annotations. You can use AJAX requests to save and load the XFDF string from the server, and setup the server to write and read XFDF files. For example,

WebViewer({...options}, document.getElementById('viewer'))
  .then(instance => {

    // Document needs to be loaded before we can import annotations
    instance.docViewer.on('documentLoaded', () => {

      // load the annotation data
      fetch('path/to/annotation/server', {
        method: 'GET'
      }).then(response => {

        response.text().then(xfdfString => {
          // <xfdf><annots><text subject="Comment" page="0" color="#FFE6A2" ... /></annots></xfdf>
          instance.annotManager.importAnnotations(xfdfString)
            .then(importedAnnotations => {
             // ...
          });
        });

      });
    })

  })

// later save the annotation data
// widgets and links will remain in the document without changing so it isn't necessary to export them
const xfdfString = await annotManager.exportAnnotations({ links: false, widgets: false });

fetch('path/to/annotation/server', {
  method: 'POST',
  body: xfdfString // written into an XFDF file in server
});

Saving annotations using XFDF files

In the POST and GET requests you can pass an id to the server to uniquely identify the XFDF file that should be saved/loaded. You have full flexibility to choose this id but here are some simple examples:

  1. Use the filename as a unique identifier to have one XFDF file per document.
  2. Use a combination of the filename and username as a unique identifier to have one XFDF per user per document.
Note: Annotations made in the web viewer can only be baked into the underlying PDF document using the PDF.js Express REST API.