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.

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:

• Saving to document sample