Events in Vue PDF Viewer

The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.

The following table lists commonly used events supported by the PDF Viewer component:

Event	Description
`bookmarkClick`	Triggers when a bookmark item is clicked in the bookmark panel.
`buttonFieldClick`	Triggers when a button form field is clicked.
`commentAdd`	Triggers when a comment is added to the comment panel.
`commentDelete`	Triggers when a comment is deleted from the comment panel.
`commentEdit`	Triggers when a comment is edited in the comment panel.
`commentSelect`	Triggers when a comment is selected in the comment panel.
`commentStatusChanged`	Triggers when a comment’s status changes in the comment panel.
`created`	Triggers during the creation of the PDF Viewer component.
`customContextMenuBeforeOpen`	Fires before the custom context menu opens.
`customContextMenuSelect`	Fires when a custom context menu item is selected.
`documentLoad`	Triggers while loading a document into the PDF Viewer.
`documentLoadFailed`	Triggers when document loading fails.
`documentUnload`	Triggers when the document is closed.
`downloadEnd`	Triggers after a document is downloaded.
`downloadStart`	Triggers when the download action is initiated.
`exportFailed`	Triggers when exporting annotations fails.
`exportStart`	Triggers when exporting annotations starts.
`exportSuccess`	Triggers when annotations are exported successfully.
`extractTextCompleted`	Triggers when text extraction is completed.
`hyperlinkClick`	Triggers when a hyperlink is clicked.
`hyperlinkMouseOver`	Triggers when hovering over a hyperlink.
`importFailed`	Triggers when importing annotations fails.
`importStart`	Triggers when importing annotations starts.
`importSuccess`	Triggers when annotations are imported successfully.
`keyboardCustomCommands`	Triggers when customized keyboard command keys are pressed.
`moveSignature`	Triggers when a signature is moved across the page.
`pageChange`	Triggers when the current page number changes.
`pageClick`	Triggers when a mouse click occurs on a page.
`pageMouseover`	Triggers when moving the mouse over a page.
`pageOrganizerSaveAs`	Triggers when a `save as` action is performed in the page organizer.
`pageRenderComplete`	Triggers after a page finishes rendering.
`pageRenderInitiate`	Triggers when page rendering begins.
`printEnd`	Triggers when a print action is completed.
`printStart`	Triggers when a print action is initiated.
`removeSignature`	Triggers when a signature is removed.
`resizeSignature`	Triggers when a signature is resized.
`resourcesLoaded`	Triggers after PDFium resources are loaded.
`signaturePropertiesChange`	Triggers when signature properties are changed.
`signatureSelect`	Triggers when a signature is selected.
`signatureUnselect`	Triggers when a signature is unselected.
`textSearchComplete`	Triggers when a text search is completed.
`textSearchHighlight`	Triggers when the searched text is highlighted.
`textSearchStart`	Triggers when a text search is initiated.
`textSelectionEnd`	Triggers when text selection is complete.
`textSelectionStart`	Triggers when text selection is initiated.
`thumbnailClick`	Triggers when a thumbnail is clicked.
`toolbarClick`	Triggers when a toolbar item is clicked.
`validateFormFields`	Triggers when form field validation fails.
`zoomChange`	Triggers when the magnification value changes.

Note: For annotation and signature events, see the dedicated Annotations Events topic.

bookmarkClick

The bookmarkClick event triggers when a bookmark item is clicked in the bookmark panel.

Event arguments: BookmarkClickEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :bookmarkClick="bookmarkClick"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    bookmarkClick: function (args) {
      console.log(`Bookmark clicked: ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

toolbarClick

The toolbarClick event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item’s id or name.

Event arguments: ClickEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :toolbarClick="toolbarClick"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    toolbarClick: function (args) {
      console.log(`Toolbar item clicked: ${args.name}`);
    },
  },
};
</script>
<style>
/* Add any necessary styles here */
</style>

validateFormFields

The validateFormFields event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.

Event arguments: ValidateFormFieldsArgs
- name: Event name
- documentName: Current document name
- formField: The last interacted field’s data (if applicable)
- nonFillableFields: Array detailing required/invalid fields

When it triggers

Add a form field and mark it Required (UI: right‑click field > Properties > Required).
Leave the field empty and click Download. The event fires and provides the list of fields that failed validation.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :validateFormFields="validateFormFields"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    validateFormFields: function (args) {
      console.log('form field event name:', args.name);
      console.log('form field document name:', args.documentName);
      console.log('form field data:', args.formField);
      console.log('non fillable form field details:', args.nonFillableFields);
    },
  },
};
</script>

Tip

To require a field programmatically, set isRequired: true when creating or editing the field via Form Designer APIs.

zoomChange

The zoomChange event triggers when the magnification value changes.

Event arguments: ZoomChangeEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :zoomChange="zoomChange"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    zoomChange: function (args) {
      console.log(`Zoom changed to: ${args.zoomValue}%`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

buttonFieldClick

The buttonFieldClick event triggers when a button form field is clicked.

Event arguments: ButtonFieldClickEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :buttonFieldClick="buttonFieldClick"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    buttonFieldClick: function (args) {
      console.log(`Button field clicked. Name: ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

commentAdd

The commentAdd event triggers when a comment is added in the comment panel.

Event arguments: CommentEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :commentAdd="commentAdd"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    commentAdd: function (args) {
      console.log(`Comment added. Id: ${args.id}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

commentDelete

The commentDelete event triggers when a comment is deleted in the comment panel.

Event arguments: CommentEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :commentDelete="commentDelete"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
   commentDelete: function (args) {
      console.log(`Comment deleted. Id: ${args.id}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

commentEdit

The commentEdit event triggers when a comment is edited in the comment panel.

Event arguments: CommentEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :commentEdit="commentEdit"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
     commentEdit: function (args) {
      console.log(`Comment edited. Id: ${args.id}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

commentSelect

The commentSelect event triggers when a comment is selected in the comment panel.

Event arguments: CommentEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :commentSelect="commentSelect"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
   commentSelect: function (args) {
      console.log(`Comment selected. Id: ${args.id}`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

commentStatusChanged

The commentStatusChanged event triggers when a comment status is changed in the comment panel.

Event arguments: CommentEventArgs.

Example:

<template>
    <div>  
            <ejs-pdfviewer 
                id="pdfviewer" 
                ref="pdfviewer" 
                :documentPath="documentPath"
                :resourceUrl="resourceUrl"
                :commentStatusChanged="commentStatusChanged">
            </ejs-pdfviewer>
    </div>
</template>
<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer } from "@syncfusion/ej2-vue-pdfviewer";


export default {
    components: {
        'ejs-pdfviewer': PdfViewerComponent
    },
    data: function() {
        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, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
    },
    methods: {
       commentStatusChanged: function (args) {
      console.log(`Comment status changed. Id: ${args.id}, Status: ${args.status}`);
    },
      },
};
</script>


<style>
/* Add any necessary styles here */
</style>

created

The created event is triggered during the creation of the PDF Viewer component.

Event arguments: void.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :created="created"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    created: function () {
      console.log('PDF Viewer created');
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

customContextMenuBeforeOpen

The customContextMenuBeforeOpen event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).

Event arguments: CustomContextMenuBeforeOpenEventArgs
- name: Event name
- ids: Array of menu item ids that will be shown; remove ids to hide items for this open

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :customContextMenuBeforeOpen="customContextMenuBeforeOpen"
      :documentLoad="documentLoad"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
      menuItems: [
        {
          text: 'SEARCH_ON_WEB',
          id: 'web_search',
          iconCss: 'e-icons e-search',
          items: [
            {
              text: 'SEARCH_IN_GOOGLE_IMAGE',
              id: 'web_search_images',
            },
            {
              text: 'SEARCH_IN_WIKIPEDIA',
              id: 'web_search_wikipedia',
            },
            {
              text: 'SEARCH_IN_YOUTUBE',
              id: 'web_search_youtube',
            },
            {
              text: 'SEARCH_GOOGLE',
              id: 'web_search_google',
            },
          ],
        },
        {
          id: 'web_search_separator',
          separator: true,
        },
      ],
    };
  },
  methods: {
    customContextMenuBeforeOpen: function (args) {
      console.log(`Before open context menu at page ${args.name}`);
    },
    documentLoad: function (args) {
      this.$refs.pdfViewer.addCustomMenu(this.menuItems, false, false);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

customContextMenuSelect

The customContextMenuSelect event fires when a custom menu item is clicked. Use it to branch logic by the clicked item’s id.

Event arguments: CustomContextMenuSelectEventArgs.
name: Event name
id: The id of the clicked menu item

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :customContextMenuSelect="customContextMenuSelect"
      :documentLoad="documentLoad"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
      menuItems: [
        {
          text: 'SEARCH_ON_WEB',
          id: 'web_search',
          iconCss: 'e-icons e-search',
          items: [
            {
              text: 'SEARCH_IN_GOOGLE_IMAGE',
              id: 'web_search_images',
            },
            {
              text: 'SEARCH_IN_WIKIPEDIA',
              id: 'web_search_wikipedia',
            },
            {
              text: 'SEARCH_IN_YOUTUBE',
              id: 'web_search_youtube',
            },
            {
              text: 'SEARCH_GOOGLE',
              id: 'web_search_google',
            },
          ],
        },
        {
          id: 'web_search_separator',
          separator: true,
        },
      ],
    };
  },
  methods: {
    customContextMenuSelect: function (args) {
      console.log(`Context menu item selected: ${args.name}`);
    },
    documentLoad: function (args) {
      this.$refs.pdfViewer.addCustomMenu(this.menuItems, false, false);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

documentLoad

The documentLoad event occurs after a document is successfully loaded and parsed.

Event arguments: LoadEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :documentLoad="documentLoad"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    documentLoad: function (args) {
      console.log(`Document loaded: page count = ${args.pageData}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

documentLoadFailed

The documentLoadFailed event triggers when loading a document fails.

Event arguments: LoadFailedEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :documentLoadFailed="documentLoadFailed"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    documentLoadFailed: function (args) {
      console.log(`Load failed. Error: ${args.documentName}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

documentUnload

The documentUnload event triggers when closing the current document.

Event arguments: UnloadEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :documentUnload="documentUnload"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    documentUnload: function () {
      console.log('Document unloaded');
    },
  },
};
</script>


<style>
/* Add any necessary styles here */
</style>

downloadEnd

The downloadEnd event triggers after a document download completes.

Event arguments: DownloadEndEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :downloadEnd="downloadEnd"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
   downloadEnd: function (args) {
      console.log(`Download finished. File name: ${args.fileName}`);
    },
  },
};
</script>


<style>
/* Add any necessary styles here */
</style>

downloadStart

The downloadStart event triggers when the download operation is initiated.

Event arguments: DownloadStartEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :downloadStart="downloadStart"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    downloadStart: function () {
      console.log('Download started');
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

exportFailed

The exportFailed event triggers when exporting annotations fails.

Event arguments: ExportFailureEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :exportFailed="exportFailed"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    exportFailed: function (args) {
      console.log(`Export failed: ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

exportStart

The exportStart event triggers when exporting annotations starts.

Event arguments: ExportStartEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :exportStart="exportStart"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    exportStart: function () {
      console.log('Export started');
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

exportSuccess

The exportSuccess event triggers when annotations are exported successfully.

Event arguments: ExportSuccessEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :exportSuccess="exportSuccess"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    exportSuccess: function () {
      console.log('Export success');
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

extractTextCompleted

The extractTextCompleted event triggers when text extraction completes.

Event arguments: ExtractTextCompletedEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :extractTextCompleted="extractTextCompleted"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    extractTextCompleted: function (args) {
      console.log(`Extracted text length: ${(args.documentTextCollection || '').length}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

hyperlinkClick

The hyperlinkClick event triggers when a hyperlink is clicked.

Event arguments: HyperlinkClickEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :hyperlinkClick="hyperlinkClick"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    hyperlinkClick: function (args) {
      console.log(`Hyperlink clicked: ${args.hyperlink}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

hyperlinkMouseOver

The hyperlinkMouseOver event triggers when hovering over a hyperlink.

Event arguments: HyperlinkMouseOverArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :hyperlinkMouseOver="hyperlinkMouseOver"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    hyperlinkMouseOver: function (args) {
      console.log(`Hyperlink hover at page: ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

importFailed

The importFailed event triggers when importing annotations fails.

Event arguments: ImportFailureEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :importFailed="importFailed"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    importFailed: function (args) {
      console.log(`Import failed: ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

importStart

The importStart event triggers when importing annotations starts.

Event arguments: ImportStartEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :importStart="importStart"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    importStart: function () {
      console.log('Import started');
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

importSuccess

The importSuccess event triggers when annotations are imported successfully.

Event arguments: ImportSuccessEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :importSuccess="importSuccess"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    importSuccess: function () {
      console.log('Import success');
    },
  },
};
</script>


<style>
/* Add any necessary styles here */
</style>

keyboardCustomCommands

The keyboardCustomCommands event triggers when customized keyboard command keys are pressed.

Event arguments: KeyboardCustomCommandsEventArgs.
- name: Event name
- keyboardCommand: The command metadata raised by Command Manager

When it triggers

After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.

Refer to Keyboard interaction for details about adding and handling custom shortcut keys.
Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :commandManager="commandManager"
      :keyboardCustomCommands="keyboardCustomCommands"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      resourceUrl:
        'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
      commandManager: {
        keyboardCommand: [
          {
            name: 'customCopy',
            gesture: {
              pdfKeys: PdfKeys.G,
              modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt,
            },
          },
          {
            name: 'customPaste',
            gesture: {
              pdfKeys: PdfKeys.H,
              modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt,
            },
          },
          {
            name: 'customCut',
            gesture: {
              pdfKeys: PdfKeys.Z,
              modifierKeys: ModifierKeys.Control,
            },
          },
          {
            name: 'customSelectAll',
            gesture: {
              pdfKeys: PdfKeys.E,
              modifierKeys: ModifierKeys.Control,
            },
          },
        ],
      },  
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    keyboardCustomCommands: function (args) {
      console.log('Custom command triggered:', args);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

moveSignature

The moveSignature event triggers when a signature is moved across the page.

Event arguments: MoveSignatureEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :moveSignature="moveSignature"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    moveSignature: function (args) {
      console.log(`Signature moved on page ${args.id}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

pageChange

The pageChange event triggers when the current page number changes (for example, via scrolling or navigation controls).

Event arguments: PageChangeEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageChange="pageChange"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageChange: function (args) {
      console.log(`Page changed from ${args.previousPageNumber} to ${args.currentPageNumber}`);
    },
  },
};
</script>


<style>
/* Add any necessary styles here */
</style>

pageClick

The pageClick event triggers when a mouse click occurs on a page.

Event arguments: PageClickEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageClick="pageClick"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageClick: function (args) {
      console.log(`Page ${args.pageNumber} clicked at (${args.x}, ${args.y})`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

pageMouseover

The pageMouseover event triggers when the mouse moves over a page.

Event arguments: PageMouseoverEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageMouseover="pageMouseover"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageMouseover: function (args) {
      console.log(`Mouse over page ${args.name}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

pageOrganizerSaveAs

The pageOrganizerSaveAs event triggers when a Save As action is performed in the page organizer.

Event arguments: PageOrganizerSaveAsEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageOrganizerSaveAs="pageOrganizerSaveAs"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageOrganizerSaveAs: function (args) {
      console.log(`Page organizer save triggered. File name: ${args.downloadDocument}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

pageRenderComplete

The pageRenderComplete event triggers after a page finishes rendering.

Event arguments: PageRenderCompleteEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageRenderComplete="pageRenderComplete"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageRenderComplete: function (args) {
      console.log(`Page ${args.data} rendering completed.`);
    },
  },
};
</script>


<style>
/* Add any necessary styles here */
</style>

pageRenderInitiate

The pageRenderInitiate event triggers when page rendering begins.

Event arguments: PageRenderInitiateEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :pageRenderInitiate="pageRenderInitiate"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    pageRenderInitiate: function (args) {
      console.log(`Page ${args.jsonData} rendering initiated.`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

printEnd

The printEnd event triggers when a print action completes.

Event arguments: PrintEndEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :printEnd="printEnd"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    printEnd: function () {
      console.log('Print action completed.');
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

printStart

The printStart event triggers when a print action is initiated.

Event arguments: PrintStartEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :printStart="printStart"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    printStart: function () {
      console.log('Print action initiated.');
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

removeSignature

The removeSignature event triggers when a signature is removed.

Event arguments: RemoveSignatureEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :removeSignature="removeSignature"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    removeSignature: function (args) {
      console.log(`Signature removed from page ${args.bounds}`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

resizeSignature

The resizeSignature event triggers when a signature is resized.

Event arguments: ResizeSignatureEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :resizeSignature="resizeSignature"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    resizeSignature: function (args) {
      console.log(`Signature resized on page ${args.currentPosition}`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

resourcesLoaded

The resourcesLoaded event triggers after the viewer’s required resources are loaded.

Event arguments: void.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :resourcesLoaded="resourcesLoaded"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    resourcesLoaded: function () {
      console.log('PDFium resources loaded.');
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

signaturePropertiesChange

The signaturePropertiesChange event triggers when signature properties change.

Event arguments: SignaturePropertiesChangeEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :signaturePropertiesChange="signaturePropertiesChange"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    signaturePropertiesChange: function (args) {
      console.log(`Signature properties changed on page ${args.type}`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

signatureSelect

The signatureSelect event triggers when a signature is selected.

Event arguments: SignatureSelectEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :signatureSelect="signatureSelect"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    signatureSelect: function (args) {
      console.log(`Signature selected on page ${args.signature}`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

signatureUnselect

The signatureUnselect event triggers when a signature is unselected.

Event arguments: SignatureUnselectEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :signatureUnselect="signatureUnselect"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    signatureUnselect: function (args) {
      console.log(`Signature unselected ${args.signature}`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

textSearchComplete

The textSearchComplete event triggers when a text search completes.

Event arguments: TextSearchCompleteEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :textSearchComplete="textSearchComplete"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    textSearchComplete: function () {
      console.log('Text search completed.');
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

textSearchHighlight

The textSearchHighlight event triggers when searched text is highlighted.

Event arguments: TextSearchHighlightEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :textSearchHighlight="textSearchHighlight"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    textSearchHighlight: function (args) {
      console.log(`Search result ${args.bounds} highlighted.`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

textSearchStart

The textSearchStart event triggers when a text search is initiated.

Event arguments: TextSearchStartEventArgs.

Example:

<template>
  <div>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :textSearchStart="textSearchStart"
    >
    </ejs-pdfviewer>
  </div>
</template>
<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data: function () {
    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,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    textSearchStart: function (args) {
      console.log(`Text search started for: "${args.searchText}"`);
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

textSelectionEnd

The textSelectionEnd event triggers when text selection is complete.

Event arguments: TextSelectionEndEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :textSelectionEnd="textSelectionEnd"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    textSelectionEnd: function (args) {
      console.log(`Text selection ended on page ${args.pageIndex}.`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

textSelectionStart

The textSelectionStart event triggers when text selection is initiated.

Event arguments: TextSelectionStartEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :textSelectionStart="textSelectionStart"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    textSelectionStart: function (args) {
      console.log(`Text selection started on page ${args.pageIndex}.`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

thumbnailClick

The thumbnailClick event triggers when a thumbnail is clicked.

Event arguments: ThumbnailClickEventArgs.

Example:

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      :thumbnailClick="thumbnailClick"
    ></ejs-pdfviewer>
  </div>
</template>

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

Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  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',
    };
  },
  methods: {
    thumbnailClick: function (args) {
      console.log(`Thumbnail clicked for page index ${args.pageNumber}.`);
    },
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
      BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer],
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic.

Events in Vue PDF Viewer

bookmarkClick

toolbarClick

validateFormFields

zoomChange

buttonFieldClick

commentAdd

commentDelete

commentEdit

commentSelect

commentStatusChanged

created

customContextMenuBeforeOpen

customContextMenuSelect

documentLoad

documentLoadFailed

documentUnload

downloadEnd

downloadStart

exportFailed

exportStart

exportSuccess

extractTextCompleted

hyperlinkClick

hyperlinkMouseOver

importFailed

importStart

importSuccess

keyboardCustomCommands

moveSignature

pageChange

pageClick

pageMouseover

pageOrganizerSaveAs

pageRenderComplete

pageRenderInitiate

printEnd

printStart

removeSignature

resizeSignature

resourcesLoaded

signaturePropertiesChange

signatureSelect

signatureUnselect

textSearchComplete

textSearchHighlight

textSearchStart

textSelectionEnd

textSelectionStart

thumbnailClick

See also