Delete annotation in Vue Pdfviewer component

16 Mar 20231 minute 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.

        <button v-on:click="deleteAnnotationById">Delete Annotation By Id</button>

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

export default {
  data () {
    return {
  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];

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