1-
21import { PdfViewer , Toolbar , Magnification , Navigation , LinkAnnotation , ThumbnailView , BookmarkView ,
3- TextSelection , TextSearch , Print , Annotation , FormFields , FormDesigner , PageOrganizer ,
4- ExtractTextOption } from '@syncfusion/ej2-pdfviewer' ;
2+ TextSelection , TextSearch , Print , Annotation , FormFields , FormDesigner , PageOrganizer } from '@syncfusion/ej2-pdfviewer' ;
53
64PdfViewer . Inject ( Toolbar , Magnification , Navigation , LinkAnnotation , ThumbnailView , BookmarkView ,
75 TextSelection , TextSearch , Print , Annotation , FormFields , FormDesigner , PageOrganizer ) ;
86
9- let viewer : PdfViewer = new PdfViewer ( ) ;
10- viewer . serviceUrl = 'https://localhost:44309/pdfviewer' ,
11- viewer . documentPath = 'Annotations.pdf' ,
12-
13- viewer . appendTo ( "#PdfViewer" ) ;
14-
15- // Annotation toggle state
16- let exportObject : string = "" ;
17- let annotationsVisible : boolean = true ;
7+ // Create the PDF viewer instance
8+ let pdfviewer : PdfViewer = new PdfViewer ( ) ;
9+ pdfviewer . resourceUrl = 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib' ;
10+ pdfviewer . documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf' ;
1811
19- const toggleButton = document . getElementById ( 'toggleBtn' ) as HTMLButtonElement | null ;
12+ // Append the viewer to the container element
13+ pdfviewer . appendTo ( '#PdfViewer' ) ;
2014
21- toggleButton ?. addEventListener ( 'click' , ( ) => {
22- console . log ( exportObject ) ;
23- if ( annotationsVisible ) {
24- // Hide annotations by exporting and deleting them
25- viewer . exportAnnotationsAsObject ( ) . then ( ( value : object ) => {
26- exportObject = JSON . stringify ( value ) ; // Convert object to string for later use
15+ // Variable to store exported annotations
16+ let exportObject : any = "" ;
2717
28- const count = viewer . annotationCollection . length ;
29- for ( let i = 0 ; i < count ; i ++ ) {
30- // Always delete the first item as the collection shrinks
31- viewer . annotationModule . deleteAnnotationById ( viewer . annotationCollection [ 0 ] . annotationId ) ;
32- }
33-
34- if ( toggleButton ) toggleButton . innerText = 'Show Annotation' ;
35- annotationsVisible = false ;
18+ // Function to hide annotations
19+ function HideAnnotations ( ) : void {
20+ pdfviewer . exportAnnotationsAsObject ( ) . then ( function ( value : any ) {
21+ exportObject = value ;
22+ pdfviewer . deleteAnnotations ( ) ;
3623 } ) ;
37- } else {
38- // Restore annotations
39- if ( exportObject ) {
40- exportObject = JSON . parse ( exportObject ) ;
41- viewer . importAnnotation ( JSON . parse ( exportObject ) ) ;
42- }
24+ }
25+
26+ // Function to unhide annotations
27+ function UnHideAnnotations ( ) : void {
28+ pdfviewer . importAnnotation ( JSON . parse ( exportObject ) ) ;
29+ }
4330
44- if ( toggleButton ) toggleButton . innerText = 'Hide Annotation' ;
45- annotationsVisible = true ;
46- }
47- } ) ;
31+ // Add event listeners to buttons
32+ document . getElementById ( 'hideBtn' ) ?. addEventListener ( 'click' , HideAnnotations ) ;
33+ document . getElementById ( 'unhideBtn' ) ?. addEventListener ( 'click' , UnHideAnnotations ) ;
0 commit comments