Some test text!

Loading...
Guides

Import/export annotations

There are a few ways to import or export annotations such as from a file, a database, or a document. There are also more advanced loading options to help with finer control of the data.

Importing and exporting 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(...)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.setDocumentXFDFRetriever(async () => {
      // load the annotation data
      const response = await fetch('path/to/annotation/server');
      const xfdfString = await response.text();

      // <xfdf>
      //    <annots>
      //      <text subject="Comment" page="0" color="#FFE6A2" ... />
      //    </annots>
      // </xfdf>
      return xfdfString;
    });

    // later save the annotation data
    // widgets and links will remain in the document without changing so it isn't necessary to export them
    annotationManager.exportAnnotations({ links: false, widgets: false }).then(xfdfString => {
      fetch('path/to/annotation/server', {
        method: 'POST',
        body: xfdfString // written into an XFDF file in server
      });
      // Full samples are available at the end of this section.
    })
  })
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.

For samples about saving annotations into XFDF files in different backends, see Github repos below:

Get the answers you need: Support

UPCOMING WEBINAR: Live tech update and run-through. October 21 @ 11am PDT