845073: Updated sample to client side

Author: SF4524LogeshKumar

How to/Show and Hide Annotations/Show and Hide Annotations/src/App.vue

@@ -1,13 +1,12 @@
 <template>
   <div id="app">
-    <button v-on:click="toggleAnnotations">
-      {{ annotationsVisible ? 'Hide Annotation' : 'Show Annotation' }}
-    </button>
+    <button id="hideBtn" v-on:click="hideAnnotations">Hide Annotations</button>
+    <button id="unhideBtn" v-on:click="unhideAnnotations">Show Annotations</button>
     <ejs-pdfviewer
       id="pdfViewer"
       ref="pdfviewer"
       :documentPath="documentPath"
-      :serviceUrl="serviceUrl">
+      :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
 </template>
@@ -23,8 +22,8 @@ export default {
   },
   data() {
     return {
-      documentPath: "Annotations.pdf",
-      serviceUrl: "https://localhost:44309/pdfviewer",
+      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
+      resourceUrl: "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
       exportObject: "",
       annotationsVisible: true
     };
@@ -36,33 +35,24 @@ export default {
     ]
   },
   methods: {
-    async toggleAnnotations() {
+    async hideAnnotations() {
       const viewer = this.$refs.pdfviewer.ej2Instances;
       
-      if (this.annotationsVisible) {
-        // Hide annotations by exporting and deleting them
-        try {
-          const value = await viewer.exportAnnotationsAsObject();
-          this.exportObject = JSON.stringify(value); // Convert object to string for later use
-          
-          const count = viewer.annotationCollection.length;
-          for (let i = 0; i < count; i++) {
-            // Always delete the first item as the collection shrinks
-            viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
-          }
-          
-          this.annotationsVisible = false;
-        } catch (error) {
-          console.error('Error hiding annotations:', error);
-        }
-      } else {
-        // Restore annotations
-        if (this.exportObject) {
-          const parsedObject = JSON.parse(this.exportObject);
-          viewer.importAnnotation(JSON.parse(parsedObject));
-        }
-        
-        this.annotationsVisible = true;
+      try {
+        const value = await viewer.exportAnnotationsAsObject();
+        this.exportObject = JSON.stringify(value); // Convert object to string for later use
+        viewer.deleteAnnotations();
+      } catch (error) {
+        console.error('Error hiding annotations:', error);
+      }
+    },
+    
+    unhideAnnotations() {
+      const viewer = this.$refs.pdfviewer.ej2Instances;
+      
+      if (this.exportObject) {
+        const parsedObject = JSON.parse(this.exportObject);
+        viewer.importAnnotation(JSON.parse(parsedObject));
       }
     }
   }