Import and export annotations in JavaScript PDF Viewer

16 Oct 20251 minute to read

Import annotations from objects or streams instead of files. To import such objects, first export annotations as objects using the exportAnnotationsAsObject() method. Only objects exported from the PDF Viewer can be imported.

Use the following steps to import and export annotations as objects, JSON, or XFDF.

Step 1: Follow the steps provided in this guide to create a simple PDF Viewer sample.

Step 2: Use the following code to perform import and export operations.

<button id="ExportXfdf">Export XFDF</button>
<button id="ExportJSON">Export JSON</button>
<button id="export">Export as Object</button>
<button id="import">Import</button>

//Export annotation as object.
// Export annotations in XFDF format.
document.getElementById('ExportXfdf').addEventListener('click', function () {
  viewer.exportAnnotation('Xfdf');
});

// Export annotations in JSON format.
document.getElementById('ExportJSON').addEventListener('click', function () {
  viewer.exportAnnotation('Json');
});

// Export annotations as an object.
document.getElementById('export').addEventListener('click', () => {
  viewer.exportAnnotationsAsObject().then(function(value) {
    exportObject = value;
  });
});

// Import annotations that were exported as objects.
document.getElementById('import').addEventListener('click', () => {
  viewer.importAnnotation(JSON.parse(exportObject));
});

View sample in GitHub