380623: Samples on Export and Import Annotation

SF4524LogeshKumar · SF4524LogeshKumar · commit 5442492c2651 · 2025-01-03T15:50:54.000+05:30
diff --git a/How to/Export and Import Annotation/index.html b/How to/Export and Import Annotation/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 PDF Viewer</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript PDF Viewer Control">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-notifications/styles/material.css" rel="stylesheet">
+    
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+    
+<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+</head>
+<body>
+    <button id="ExportXfdf">ExportXfdf</button>
+    <button id="ExportJSON">ExportJSON</button>
+    <button id="export">ExportasObject</button>
+    <button id="import">Import</button>
+
+    <div id="container">
+        <div id="PdfViewer" style="height:500px;width:100%;"></div>        
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+</script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
diff --git a/How to/Export and Import Annotation/index.js b/How to/Export and Import Annotation/index.js
@@ -0,0 +1,29 @@
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+    resourceUrl:'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib'
+});
+ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
+                              ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
+pdfviewer.appendTo('#PdfViewer');                              
+
+document.getElementById('ExportXfdf').addEventListener('click', function () {
+// export the annotation in XFDF format.
+pdfviewer.exportAnnotation('Xfdf');
+});
+
+document.getElementById('ExportJSON').addEventListener('click', function () {
+// export the annotation in JSON format.
+pdfviewer.exportAnnotation('Json');
+});
+
+//Export annotation as object.
+document.getElementById('export').addEventListener('click', () => {
+  pdfviewer.exportAnnotationsAsObject().then(function(value) {
+    exportObject = value;
+  });
+});
+
+//Import annotation that are exported as object.
+document.getElementById('import').addEventListener('click', () => {
+  pdfviewer.importAnnotation(JSON.parse(exportObject));
+});
