Some test text!

Search
Hamburger Icon

Web / 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 the document

Another option is to merge the annotations back into the document, avoiding the need to handle XFDF separately. It is achieved by using getFileData which returns an ArrayBuffer of the PDF with annotations. It can be sent to the server with a POST request, so that the file can be updated on the server.

WebViewer(...)
  .then(instance => {
  const { documentViewer, annotationManager } = instance.Core;
  const filename = 'myfile.pdf';

    // load a document with annotations
    instance.UI.loadDocument('https://myserver.com/myfile.pdf', { filename });

    // later save the document with updated annotations data
    documentViewer.addEventListener('annotationsLoaded', () => {
      annotationManager.exportAnnotations().then(xfdfString => {
        const doc =  documentViewer.getDocument();
        doc.getFileData({ xfdfString }).then(data => {
          const arr = new Uint8Array(data);
          const blob = new Blob([ arr ], { type: 'application/pdf' });
          const formData = new FormData();
          formData.append('blob', blob);
          fetch(`/server/annotationHandler.js?filename=${filename}`, {
            method: 'POST',
            body: formData // written into a PDF file in the server
          });
        })
      });
    })
  })

// Full sample is available at the end of this section.
Saving annotations back to the document

This setup can also be useful for applications that do not have a server or that will handle documents in the user's device locally. However, it would not be suitable for applications where multiple users are annotating and sharing the same document.

For samples about saving annotations into the document itself, see Github repo below:

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales