Import export annotation in EJ2 JavaScript Pdfviewer control

15 Jan 20251 minute to read

The PDF Viewer library allows you to import annotations from objects or streams instead of loading it as a file. To import such annotation objects, the PDF Viewer control must export the PDF annotations as objects using the ExportAnnotationsAsObject() method. Only the annotation objects that are exported from the PDF Viewer can be imported.

The following steps are used to import and export annotations in various formats such as objects, JSON, and XFDF.

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

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

<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