Skip to content

Commit 259ae22

Browse files
rparthi-1687rparthi-1687
authored
Merge pull request #36 from SyncfusionExamples/EJ2-845073-shAnnot
845073: Sample for Show and Hide Annotation
2 parents 692f101 + ebcc684 commit 259ae22

File tree

2 files changed

+66
-0
lines changed

2 files changed

+66
-0
lines changed

‎How to/Show and Hide Annotation/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 PDF Viewer</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript PDF Viewer Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-pdfviewer/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-notifications/styles/material.css" rel="stylesheet">
17+
18+
<!-- Essential JS 2 PDF Viewer's script -->
19+
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
20+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
21+
22+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
23+
</head>
24+
<body>
25+
<div id="container">
26+
<button id="hideBtn">Hide Annotations</button>
27+
<button id="unhideBtn">Unhide Annotations</button>
28+
<div id="PdfViewer" style="height:500px;width:100%;"></div>
29+
</div>
30+
31+
<script>
32+
var ele = document.getElementById('container');
33+
if(ele) {
34+
ele.style.visibility = "visible";
35+
}
36+
</script>
37+
<script src="index.js" type="text/javascript"></script>
38+
</body></html>

‎How to/Show and Hide Annotation/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let exportObject = null;
2+
let annotationsVisible = true;
3+
4+
var pdfviewer = new ej.pdfviewer.PdfViewer({
5+
resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
6+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
7+
});
8+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
9+
ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
10+
pdfviewer.appendTo('#PdfViewer');
11+
12+
// Function to hide annotations
13+
function HideAnnotations() {
14+
var proxy = this;
15+
pdfviewer.exportAnnotationsAsObject().then(function(value) {
16+
exportObject = value;
17+
pdfviewer.deleteAnnotations();
18+
});
19+
}
20+
21+
// Function to unhide annotations
22+
function UnHideAnnotations() {
23+
pdfviewer.importAnnotation(JSON.parse(exportObject));
24+
}
25+
26+
// Add event listeners to buttons
27+
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
28+
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);

0 commit comments

Comments
 (0)