Guides

Import & Export Annotations in PDF

This sample shows how to set up the export and import of annotations. The document from which the annotations are exported is an xfdf file

// Import the JS file of ComPDFKit Web Demo.
<script src="/webviewer.global.js"></script>;

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample1: Export Annotations
    if (ExportAnnotation(docViewer)) {
      console.log('Export annotaitons done.');
    } else {
      console.log('Export annotaitons failed.');
    }

    // Sample2: Import Annotations
    ImportAnnotaiton(docViewer);
  })
})

// Export annotations in the document to XFDF format.
async function ExportAnnotation(docViewer) {
  /**
   * Exports annotations in the document to XFDF format.
   * 
   * @param {boolean} isDownload - A flag indicating whether to automatically download the exported XFDF file.
   *     - true: Automatically triggers the download of the file to the local machine.
   *     - false: Returns the XFDF string without downloading the file.
   * 
   * @returns {Promise<boolean>} Returns true if export is successful, false otherwise.
   */
  const xfdfString = await docViewer.exportXfdf();

  if (!xfdfString) {
    return false;
  }
  return true;
}

// Importing XFDF into the document.
async function ImportAnnotaiton(docViewer) {
  const file = await fetch('test.xfdf');
  docViewer.importAnnotations(file);
}