Some test text!


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.

  .then(instance => {
    const { docViewer } = instance;

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

    // later save the document with updated annotations data
    docViewer.on('annotationsLoaded', () => {
      const doc =  docViewer.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:

Get the answers you need: Support


Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.