Import and export annotations in TypeScript PDF Viewer

14 Oct 20252 minutes 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 the link to create a simple PDF Viewer sample.

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

    <button id="ExportXfdf">ExportXfdf</button>
    <button id="ExportJSON">ExportJSON</button>
    <button id="export">ExportasObject</button>
    <button id="import">Import</button>

enum AnnotationDataFormat {
    Json = 'Json',
    Xfdf = 'Xfdf'
  }

let ExportXfdf = document.getElementById('ExportXfdf');
if (ExportXfdf) {
    ExportXfdf.addEventListener('click', function () {
        // export the annotation in XFDF format.
        pdfviewer.exportAnnotation(AnnotationDataFormat.Xfdf);
    });
}

let ExportJSON = document.getElementById('ExportJSON');
if (ExportJSON) {
    ExportJSON.addEventListener('click', function () {
        // export the annotation in JSON format.
        pdfviewer.exportAnnotation(AnnotationDataFormat.Json);
    });
}

let exportObject: any;
let ExportAnnotationsAsObject = document.getElementById('export');
//Export annotation as object.
if (ExportAnnotationsAsObject) {
    ExportAnnotationsAsObject.addEventListener('click', () => {
        pdfviewer.exportAnnotationsAsObject().then(function (value: any) {
            exportObject = value;
        });
    });
}

let Import = document.getElementById('import');
//Import annotation that are exported as object.
if (Import) {
    Import.addEventListener('click', () => {
        pdfviewer.importAnnotation(JSON.parse(exportObject));
    });
}

View sample in GitHub