Search results

Delete a specific annotation in Vue PDF Viewer component

25 Jan 2023 / 2 minutes to read

The PDF Viewer library allows you to delete a specific annotation from a PDF document. Deleting a specific annotation can be done using the deleteAnnotationById() method. This method is used to delete a specific annotation using its id.

The following steps are used to delete a specific annotation from PDF Document.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Use the following code snippet to delete a specific annotation using deleteAnnotationById() method.

Copied to clipboard
<template>
    <div>
        <button v-on:click="deleteAnnotationById">Delete Annotation By Id</button>
        <ejs-pdfviewer
            id="pdfViewer"
            :serviceUrl="serviceUrl"
            :documentPath="documentPath">
        </ejs-pdfviewer>
    </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields} from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);

export default {
  data () {
    return {
      serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
      documentPath:"PDF_Succinctly.pdf",
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
                ThumbnailView, Print, TextSelection, TextSearch,Annotation, FormDesigner, FormFields]},

  methods: {
  // Delete annotation by ID.
    deleteAnnotationById: function() {
      var viewer = document.getElementById('pdfViewer').ej2_instances[0];
      viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
    }
  }
}
</script>

Note : If you use the deleteAnnotation API to delete an annotation, select an annotation first using the selectAnnotation API. You can’t delete an annotation without selecting that annotation.

Find the sample, how to delete a specific annotation using deleteAnnotationById

View sample in GitHub