PDF Viewer annotation events in Vue

28 Feb 202624 minutes to read

The PDF Viewer control supports several annotation events that enable applications to respond to user interactions—adding, moving, resizing, selecting, and removing annotations. Examples in this article reference the resource URL shown in the code samples.

The annotation events supported by the PDF Viewer control are:

Event	Description
annotationAdd	Triggers when an annotation is added.
annotationDoubleClick	Triggers when an annotation is double-clicked.
annotationMouseLeave	Triggers when the mouse cursor leaves an annotation.
annotationMouseover	Triggers when the mouse cursor moves over an annotation.
annotationMove	Triggers when an annotation is moved.
annotationMoving	Triggers while an annotation is being moved.
annotationPropertiesChange	Triggers when an annotation’s properties are changed.
annotationRemove	Triggers when an annotation is removed.
annotationResize	Triggers when an annotation is resized.
annotationSelect	Triggers when an annotation is selected.
annotationUnselect	Triggers when an annotation is unselected.
beforeAddFreeText	Triggers before adding free text.
addSignature	Triggers when a signature is added.
removeSignature	Triggers when a signature is removed.
resizeSignature	Triggers when a signature is resized.
signaturePropertiesChange	Triggers when signature properties change.
signatureSelect	Triggers when a signature is selected.
signatureUnselect	Triggers when a signature is unselected.

annotationAdd

The annotationAdd event triggers when an annotation is added to a PDF document’s page.

Event Arguments

For event data, see AnnotationAddEventArgs. It provides properties such as annotationId, pageNumber, annotationType, and bounds.

The following example illustrates how to handle the annotationAdd event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationAdd="annotationAdded">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationAdded = function (args) {
      console.log('Annotation added with ID: ' + args.annotationId);
      console.log('Annotation type: ' + args.annotationType);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationAdd="annotationAdded">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationAdded: function (args) {
          console.log('Annotation added with ID: ' + args.annotationId);
          console.log('Annotation type: ' + args.annotationType);
      }
    }
  }
</script>

annotationDoubleClick

The annotationDoubleClick event triggers when an annotation is double-clicked.

Event Arguments

For event data, see AnnotationDoubleClickEventArgs.

The following example illustrates how to handle the annotationDoubleClick event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationDoubleClick="annotationDoubleClicked">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationDoubleClicked = function (args) {
      console.log('Annotation double-clicked on page: ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationDoubleClick="annotationDoubleClicked">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationDoubleClicked: function (args) {
          console.log('Annotation double-clicked on page: ' + args.pageIndex);
      }
    }
  }
</script>

annotationMouseLeave

The annotationMouseLeave event triggers when the mouse cursor leaves an annotation.

Event Arguments

For event data, see AnnotationMouseLeaveEventArgs.

The following example illustrates how to handle the annotationMouseLeave event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMouseLeave="annotationMouseLeaved">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationMouseLeaved = function (args) {
      console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMouseLeave="annotationMouseLeaved">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationMouseLeaved: function (args) {
          console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex);
      }
    }
  }
</script>

annotationMouseover

The annotationMouseover event triggers when the mouse cursor moves over an annotation.

Event Arguments

For event data, see AnnotationMouseOverEventArgs.

The following example illustrates how to handle the annotationMouseover event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMouseover="annotationMouseovered">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationMouseovered = function (args) {
      console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMouseover="annotationMouseovered">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationMouseovered: function (args) {
          console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId);
      }
    }
  }
</script>

annotationMove

The annotationMove event triggers when an annotation is moved.

Event Arguments

For event data, see AnnotationMoveEventArgs.

The following example illustrates how to handle the annotationMove event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMove="annotationMoved">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationMoved = function (args) {
      console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMove="annotationMoved">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationMoved: function (args) {
          console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex);
      }
    }
  }
</script>

annotationMoving

The annotationMoving event triggers while an annotation is being moved.

Event Arguments

For event data, see AnnotationMovingEventArgs.

The following example illustrates how to handle the annotationMoving event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMoving="annotationMovingd">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationMovingd = function (args) {
      console.log('Annotation is being moved. Current Action: ' + args.currentPosition);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationMoving="annotationMovingd">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationMovingd: function (args) {
          console.log('Annotation is being moved. Current Action: ' + args.currentPosition);
      }
    }
  }
</script>

annotationPropertiesChange

The annotationPropertiesChange event triggers when an annotation’s properties are changed.

Event Arguments

For event data, see AnnotationPropertiesChangeEventArgs. It provides properties such as annotationId, pageNumber, and action.

The following example illustrates how to handle the annotationPropertiesChange event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationPropertiesChange="annotationPropertiesChanged">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationPropertiesChanged = function (args) {
      console.log('Annotation properties changed for ID: ' + args.annotationId);
      console.log('isThicknessChanged: ' + args.isThicknessChanged);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationPropertiesChange="annotationPropertiesChanged">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationPropertiesChanged: function (args) {
          console.log('Annotation properties changed for ID: ' + args.annotationId);
          console.log('isThicknessChanged: ' + args.isThicknessChanged);
      }
    }
  }
</script>

annotationRemove

The annotationRemove event triggers when an annotation is removed.

Event Arguments

For event data, see AnnotationRemoveEventArgs. It provides properties such as annotationId and pageNumber.

The following example illustrates how to handle the annotationRemove event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationRemove="annotationRemoved">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationRemoved = function (args) {
      console.log('Annotation removed with ID: ' + args.annotationId);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationRemove="annotationRemoved">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationRemoved: function (args) {
          console.log('Annotation removed with ID: ' + args.annotationId);
      }
    }
  }
</script>

annotationResize

The annotationResize event triggers when an annotation is resized.

Event Arguments

For event data, see AnnotationResizeEventArgs.

The following example illustrates how to handle the annotationResize event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationResize="annotationResized">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationResized = function (args) {
      console.log('Annotation resized. ID: ' + args.annotationId);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationResize="annotationResized">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationResized: function (args) {
          console.log('Annotation resized. ID: ' + args.annotationId);
      }
    }
  }
</script>

annotationSelect

The annotationSelect event triggers when an annotation is selected.

Event Arguments

For event data, see AnnotationSelectEventArgs.

The following example illustrates how to handle the annotationSelect event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app"> 
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationSelect="annotationSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationSelected = function (args) {
      console.log('Annotation selected with ID: ' + args.annotationId);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationSelect="annotationSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationSelected: function (args) {
          console.log('Annotation selected with ID: ' + args.annotationId);
      }
    }
  }
</script>

annotationUnselect

The annotationUnselect event triggers when an annotation is unselected.

Event Arguments

For event data, see AnnotationUnSelectEventArgs.

The following example illustrates how to handle the annotationUnselect event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationUnSelect="annotationUnSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const annotationUnSelected = function (args) {
      console.log('Annotation unselected with ID: ' + args.annotationId);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :annotationUnSelect="annotationUnSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      annotationUnSelected: function (args) {
          console.log('Annotation unselected with ID: ' + args.annotationId);
      }
    }
  }
</script>

beforeAddFreeText

The beforeAddFreeText event triggers before adding free text to the PDF Viewer.

Event Arguments

For event data, see BeforeAddFreeTextEventArgs.

The following example illustrates how to handle the beforeAddFreeText event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :beforeAddFreeText="beforeAddFreeTexted">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const beforeAddFreeTexted = function (args) {
      console.log('Before adding free text on page: ' + args.pageIndex);
      // Set args.cancel to true to prevent adding the free text annotation
      // args.cancel = true;
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :beforeAddFreeText="beforeAddFreeTexted">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      beforeAddFreeTexted: function (args) {
          console.log('Before adding free text on page: ' + args.pageIndex);
          // Set args.cancel to true to prevent adding the free text annotation
          // args.cancel = true;
      }
    }
  }
</script>

addSignature

The addSignature event triggers when a signature is added to the PDF Viewer.

Event Arguments

For event data, see AddSignatureEventArgs. It provides properties such as pageNumber.

The following example illustrates how to handle the addSignature event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :addSignature="signatureAdded">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signatureAdded = function (args) {
      console.log('Signature added to page: ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :addSignature="signatureAdded">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signatureAdded: function (args) {
          console.log('Signature added to page: ' + args.pageIndex);
      }
    }
  }
</script>

removeSignature

The removeSignature event triggers when a signature is removed from the PDF Viewer.

Event Arguments

For event data, see RemoveSignatureEventArgs. It provides properties such as pageNumber.

The following example illustrates how to handle the removeSignature event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :removeSignature="signatureRemoved">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signatureRemoved = function (args) {
      console.log('Signature removed from page: ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :removeSignature="signatureRemoved">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signatureRemoved: function (args) {
          console.log('Signature removed from page: ' + args.pageIndex);
      }
    }
  }
</script>

resizeSignature

The resizeSignature event triggers when a signature is resized in the PDF Viewer.

Event Arguments

For event data, see ResizeSignatureEventArgs.

The following example illustrates how to handle the resizeSignature event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :resizeSignature="signatureResized">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signatureResized = function (args) {
      console.log('Signature resized on page ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :resizeSignature="signatureResized">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signatureResized: function (args) {
          console.log('Signature resized on page ' + args.pageIndex);
      }
    }
  }
</script>

signaturePropertiesChange

The signaturePropertiesChange event triggers when signature properties are changed in the PDF Viewer.

Event Arguments

For event data, see SignaturePropertiesChangeEventArgs.

The following example illustrates how to handle the signaturePropertiesChange event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signaturePropertiesChanged = function (args) {
      console.log('Signature properties changed on page ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signaturePropertiesChanged: function (args) {
          console.log('Signature properties changed on page ' + args.pageIndex);
      }
    }
  }
</script>

signatureSelect

The signatureSelect event triggers when a signature is selected in the PDF Viewer.

Event Arguments

For event data, see SignatureSelectEventArgs.

The following example illustrates how to handle the signatureSelect event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signatureSelect="signatureSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signatureSelected = function (args) {
      console.log('Signature selected on page ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signatureSelect="signatureSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signatureSelected: function (args) {
          console.log('Signature selected on page ' + args.pageIndex);
      }
    }
  }
</script>

signatureUnselect

The signatureUnselect event triggers when a signature is unselected in the PDF Viewer.

Event Arguments

For event data, see SignatureUnSelectEventArgs.

The following example illustrates how to handle the signatureUnselect event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signatureUnselect="signatureUnSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
  import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
  import { provide, ref } from 'vue';

  const pdfviewer = ref(null);
  const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

  provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer])

  const signatureUnSelected = function (args) {
      console.log('Signature unselected on page ' + args.pageIndex);
  }
</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :signatureUnselect="signatureUnSelected">
    </ejs-pdfviewer>
  </div>
</template>

<script>
  import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
    TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';

  export default {
    name: "App",
    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },
    data() {
      return {
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
        resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      };
    },
    provide: {
      PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
        TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]
    },
    methods: {
      signatureUnSelected: function (args) {
          console.log('Signature unselected on page ' + args.pageIndex);
      }
    }
  }
</script>

PDF Viewer annotation events in Vue

annotationAdd

Event Arguments

annotationDoubleClick

Event Arguments

annotationMouseLeave

Event Arguments

annotationMouseover

Event Arguments

annotationMove

Event Arguments

annotationMoving

Event Arguments

annotationPropertiesChange

Event Arguments

annotationRemove

Event Arguments

annotationResize

Event Arguments

annotationSelect

Event Arguments

annotationUnselect

Event Arguments

beforeAddFreeText

Event Arguments

Signature-related events

addSignature

Event Arguments

removeSignature

Event Arguments

resizeSignature

Event Arguments

signaturePropertiesChange

Event Arguments

signatureSelect

Event Arguments

signatureUnselect

Event Arguments