Events in ASP.NET Core PDF Viewer control

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

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

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:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   bookmarkClick="bookmarkClicked">
    </ejs-pdfviewer>
</div>

<script>
    function bookmarkClicked(args) {
        console.log(`Bookmark clicked: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   serviceUrl="/api/PdfViewer"
                   bookmarkClick="bookmarkClicked">
    </ejs-pdfviewer>
</div>

<script>
    function bookmarkClicked(args) {
        console.log(`Bookmark clicked: ${args.name}`);
    }
</script>

toolbarClick

The toolbarClick event triggers when a toolbar item is clicked.

Event arguments: ClickEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   toolbarClick="ToolbarClicked">
    </ejs-pdfviewer>
</div>

<script>
    function ToolbarClicked(args) {
        console.log(`Toolbar item clicked: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   serviceUrl="/api/PdfViewer"
                   toolbarClick="ToolbarClicked">
    </ejs-pdfviewer>
</div>

<script>
    function ToolbarClicked(args) {
        console.log(`Toolbar item clicked: ${args.name}`);
    }
</script>

validateFormFields

The validateFormFields event is raised when form 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 your app 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

How to trigger

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:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   validateFormFields="validateFormFields"
                   enableFormFieldsValidation=true>
    </ejs-pdfviewer>
</div>

<script>
    function validateFormFields(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>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   validateFormFields="validateFormFields"
                   enableFormFieldsValidation=true>
    </ejs-pdfviewer>
</div>

<script>
    function validateFormFields(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/editing the field via Form Designer APIs.

zoomChange

The zoomChange event triggers when the magnification value changes.

Event arguments: ZoomChangeEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   zoomChange="zoomChanged">
    </ejs-pdfviewer>
</div>

<script>
    function zoomChange(args) {
        console.log(`Zoom changed to: ${args.zoomValue}%`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   zoomChange="zoomChanged">
    </ejs-pdfviewer>
</div>

<script>
    function zoomChange(args) {
        console.log(`Zoom changed to: ${args.zoomValue}%`);
    }
</script>

buttonFieldClick

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

Event arguments: ButtonFieldClickEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   buttonFieldClick="buttonFieldClicked">
    </ejs-pdfviewer>
</div>

<script>
    function buttonFieldClicked(args) {
        console.log(`Button field clicked. Name: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   buttonFieldClick="buttonFieldClicked">
    </ejs-pdfviewer>
</div>

<script>
    function buttonFieldClicked(args) {
        console.log(`Button field clicked. Name: ${args.name}`);
    }
</script>

commentAdd

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

Event arguments: CommentEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   commentAdd="commentAdded">
    </ejs-pdfviewer>
</div>

<script>
    function commentAdded(args) {
        console.log(`Comment added. Id: ${args.id}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   commentAdd="commentAdded">
    </ejs-pdfviewer>
</div>

<script>
    function commentAdded(args) {
        console.log(`Comment added. Id: ${args.id}`);
    }
</script>

commentDelete

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

Event arguments: CommentEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   commentDelete="commentDeleted">
    </ejs-pdfviewer>
</div>

<script>
    function commentDeleted(args) {
        console.log(`Comment deleted. Id: ${args.id}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   commentDelete="commentDeleted">
    </ejs-pdfviewer>
</div>

<script>
    function commentDeleted(args) {
        console.log(`Comment deleted. Id: ${args.id}`);
    }
</script>

commentEdit

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

Event arguments: CommentEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   commentEdit="CommentEdited">
    </ejs-pdfviewer>
</div>

<script>
    function CommentEdited(args) {
        console.log(`Comment edited. Id: ${args.id}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   commentEdit="CommentEdited">
    </ejs-pdfviewer>
</div>

<script>
    function CommentEdited(args) {
        console.log(`Comment edited. Id: ${args.id}`);
    }
</script>

commentSelect

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

Event arguments: CommentEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   commentSelect="commentSelected">
    </ejs-pdfviewer>
</div>

<script>
    function CommentEdited(args) {
        console.log(`Comment selected. Id: ${args.id}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   commentSelect="commentSelected">
    </ejs-pdfviewer>
</div>

<script>
    function CommentEdited(args) {
        console.log(`Comment selected. Id: ${args.id}`);
    }
</script>

commentStatusChanged

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

Event arguments: CommentEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   commentStatusChanged="commentStatusChanged">
    </ejs-pdfviewer>
</div>

<script>
    function commentStatusChanged(args) {
        console.log(`Comment status changed. Id: ${args.id}, Status: ${args.status}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   commentStatusChanged="commentStatusChanged">
    </ejs-pdfviewer>
</div>

<script>
    function commentStatusChanged(args) {
        console.log(`Comment status changed. Id: ${args.id}, Status: ${args.status}`);
    }
</script>

created

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

Event arguments: void.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   created="created">
    </ejs-pdfviewer>
</div>

<script>
    function created(args) {
        console.log('PDF Viewer created');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   created="created">
    </ejs-pdfviewer>
</div>

<script>
    function created(args) {
        console.log('PDF Viewer created');
    }
</script>

customContextMenuBeforeOpen

The customContextMenuBeforeOpen event fires just before the context menu is shown. Use it to show/hide items based on 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; you can remove ids to hide items for this open

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   customContextMenuBeforeOpen="customContextMenuBeforeOpened">
    </ejs-pdfviewer>
</div>

<script>
    function customContextMenuBeforeOpened(args) {
        console.log(`Before open context menu at page ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   customContextMenuBeforeOpen="customContextMenuBeforeOpened">
    </ejs-pdfviewer>
</div>

<script>
    function customContextMenuBeforeOpened(args) {
        console.log(`Before open context menu at page ${args.name}`);
    }
</script>

customContextMenuSelect

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

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

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   customContextMenuSelect="customContextMenuSelected">
    </ejs-pdfviewer>
</div>

<script>
    function customContextMenuSelected(args) {
        console.log(`Before open context menu at page ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   customContextMenuSelect="customContextMenuSelected">
    </ejs-pdfviewer>
</div>

<script>
    function customContextMenuSelected(args) {
        console.log(`Before open context menu at page ${args.name}`);
    }
</script>

documentLoad

The documentLoad event occurs when a document is successfully loaded.

Event arguments: LoadEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   documentLoad="documentLoaded">
    </ejs-pdfviewer>
</div>

<script>
    function documentLoaded(args) {
        console.log(`Document loaded: page count = ${args.pageData}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   documentLoad="documentLoaded">
    </ejs-pdfviewer>
</div>

<script>
    function documentLoaded(args) {
        console.log(`Document loaded: page count = ${args.pageData}`);
    }
</script>

documentLoadFailed

The documentLoadFailed event is triggered when loading a document fails.

Event arguments: LoadFailedEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   documentLoadFailed="documentLoadFailed">
    </ejs-pdfviewer>
</div>

<script>
    function documentLoadFailed(args) {
        console.log(`Load failed. Error: ${args.documentName}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   documentLoadFailed="documentLoadFailed">
    </ejs-pdfviewer>
</div>

<script>
    function documentLoadFailed(args) {
        console.log(`Load failed. Error: ${args.documentName}`);
    }
</script>

documentUnload

The documentUnload event is triggered when closing the current document.

Event arguments: UnloadEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   documentUnload="documentUnloaded">
    </ejs-pdfviewer>
</div>

<script>
    function documentUnloaded(args) {
        console.log('Document unloaded');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   documentUnload="documentUnloaded">
    </ejs-pdfviewer>
</div>

<script>
    function documentUnloaded(args) {
        console.log('Document unloaded');
    }
</script>

downloadEnd

The downloadEnd event is triggered after a document download completes.

Event arguments: DownloadEndEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   downloadEnd="downloadEnded">
    </ejs-pdfviewer>
</div>

<script>
    function downloadEnded(args) {
        console.log(`Download finished. File name: ${args.fileName}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer
                   downloadEnd="downloadEnded">
    </ejs-pdfviewer>
</div>

<script>
    function downloadEnded(args) {
        console.log(`Download finished. File name: ${args.fileName}`);
    }
</script>

downloadStart

The downloadStart event is triggered when the download operation is initiated.

Event arguments: DownloadStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   downloadStart="downloadStarted">
    </ejs-pdfviewer>
</div>

<script>
    function downloadStarted(args) {
        console.log('Download started');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   serviceUrl="/api/PdfViewer"
                   downloadStart="downloadStarted">
    </ejs-pdfviewer>
</div>

<script>
    function downloadStarted(args) {
        console.log('Download started');
    }
</script>

exportFailed

The exportFailed event is triggered when exporting annotations fails.

Event arguments: ExportFailureEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportFailed="exportFailed">
    </ejs-pdfviewer>
</div>

<script>
    function exportFailed(args) {
        console.log(`Export failed: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportFailed="exportFailed">
    </ejs-pdfviewer>
</div>

<script>
    function exportFailed(args) {
        console.log(`Export failed: ${args.name}`);
    }
</script>

exportStart

The exportStart event is triggered when exporting annotations starts.

Event arguments: ExportStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportStart="exportStarted">
    </ejs-pdfviewer>
</div>

<script>
    function exportStarted(args) {
        console.log('Export started');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportStart="exportStarted">
    </ejs-pdfviewer>
</div>

<script>
    function exportStarted(args) {
        console.log('Export started');
    }
</script>

exportSuccess

The exportSuccess event is triggered when annotations are exported successfully.

Event arguments: ExportSuccessEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportSuccess="exportSuccess">
    </ejs-pdfviewer>
</div>

<script>
    function exportSuccess(args) {
        console.log('Export success');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   exportSuccess="exportSuccess">
    </ejs-pdfviewer>
</div>

<script>
    function exportSuccess(args) {
        console.log('Export success');
    }
</script>

extractTextCompleted

The extractTextCompleted event is triggered when text extraction completes.

Event arguments: ExtractTextCompletedEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   extractTextCompleted="extractTextCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function extractTextCompleted(args) {
        console.log(`Extracted text length: ${(args.documentTextCollection || '').length}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   extractTextCompleted="extractTextCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function extractTextCompleted(args) {
        console.log(`Extracted text length: ${(args.documentTextCollection || '').length}`);
    }
</script>

hyperlinkClick

The hyperlinkClick event is triggered when a hyperlink is clicked.

Event arguments: HyperlinkClickEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   hyperlinkClick="hyperlinkClicked">
    </ejs-pdfviewer>
</div>

<script>
    function hyperlinkClicked(args) {
        console.log(`Hyperlink clicked: ${args.hyperlink}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   hyperlinkClick="hyperlinkClicked">
    </ejs-pdfviewer>
</div>

<script>
    function hyperlinkClicked(args) {
        console.log(`Hyperlink clicked: ${args.hyperlink}`);
    }
</script>

hyperlinkMouseOver

The hyperlinkMouseOver event is triggered when hovering over a hyperlink.

Event arguments: HyperlinkMouseOverArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   hyperlinkMouseOver="hyperlinkMouseOvered">
    </ejs-pdfviewer>
</div>

<script>
    function hyperlinkMouseOvered(args) {
        console.log(`Hyperlink hover at page: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   hyperlinkMouseOver="hyperlinkMouseOvered">
    </ejs-pdfviewer>
</div>

<script>
    function hyperlinkMouseOvered(args) {
        console.log(`Hyperlink hover at page: ${args.name}`);
    }
</script>

importFailed

The importFailed event is triggered when importing annotations fails.

Event arguments: ImportFailureEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importFailed="importFailed">
    </ejs-pdfviewer>
</div>

<script>
    function importFailed(args) {
        console.log(`Import failed: ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importFailed="importFailed">
    </ejs-pdfviewer>
</div>

<script>
    function importFailed(args) {
        console.log(`Import failed: ${args.name}`);
    }
</script>

importStart

The importStart event is triggered when importing annotations starts.

Event arguments: ImportStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importStart="importStarted">
    </ejs-pdfviewer>
</div>

<script>
    function importStarted(args) {
        console.log('Import started');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importStart="importStarted">
    </ejs-pdfviewer>
</div>

<script>
    function importStarted(args) {
        console.log('Import started');
    }
</script>

importSuccess

The importSuccess event is triggered when annotations are imported successfully.

Event arguments: ImportSuccessEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importSuccess="importSuccess">
    </ejs-pdfviewer>
</div>

<script>
    function importSuccess(args) {
        console.log('Import success');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   importSuccess="importSuccess">
    </ejs-pdfviewer>
</div>

<script>
    function importSuccess(args) {
        console.log('Import success');
    }
</script>

keyboardCustomCommands

The keyboardCustomCommands event is triggered 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 you register gestures in commandManager.keyboardCommand. For example, when you press Shift + Alt + G or Shift + Alt + H, the event gets triggered. Just like this, you can handle custom keyboard shortcuts.

Refer here for additional details about adding your own shortcut keys and handling them: see Keyboard interaction.
Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   keyboardCustomCommands="keyboardCustomCommands">
    </ejs-pdfviewer>
</div>

<script>
    function keyboardCustomCommands(args) {
        console.log('Custom command triggered:', args);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   keyboardCustomCommands="keyboardCustomCommands">
    </ejs-pdfviewer>
</div>

<script>
    function keyboardCustomCommands(args) {
        console.log('Custom command triggered:', args);
    }
</script>

moveSignature

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

Event arguments: MoveSignatureEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   moveSignature="moveSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function moveSignatured(args) {
        console.log(`Signature moved on page ${args.id}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   moveSignature="moveSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function moveSignatured(args) {
        console.log(`Signature moved on page ${args.id}`);
    }
</script>

pageChange

The pageChange event triggers when the current page number changes.

Event arguments: PageChangeEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageChange="pageChanged">
    </ejs-pdfviewer>
</div>

<script>
    function pageChanged(args) {
        console.log(`Page changed from ${args.previousPageNumber} to ${args.currentPageNumber}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageChange="pageChanged">
    </ejs-pdfviewer>
</div>

<script>
    function pageChanged(args) {
        console.log(`Page changed from ${args.previousPageNumber} to ${args.currentPageNumber}`);
    }
</script>

pageClick

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

Event arguments: PageClickEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageClick="pageClicked">
    </ejs-pdfviewer>
</div>

<script>
    function pageClicked(args) {
        console.log(`Page ${args.pageNumber} clicked at (${args.x}, ${args.y})`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageClick="pageClicked">
    </ejs-pdfviewer>
</div>

<script>
    function pageClicked(args) {
        console.log(`Page ${args.pageNumber} clicked at (${args.x}, ${args.y})`);
    }
</script>

pageMouseover

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

Event arguments: PageMouseoverEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageMouseover="pageMouseover">
    </ejs-pdfviewer>
</div>

<script>
    function pageMouseover(args) {
        console.log(`Mouse over page ${args.name}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageMouseover="pageMouseover">
    </ejs-pdfviewer>
</div>

<script>
    function pageMouseover(args) {
        console.log(`Mouse over page ${args.name}`);
    }
</script>

pageOrganizerSaveAs

The pageOrganizerSaveAs event triggers when a save as action is performed in the page organizer.

Event arguments: PageOrganizerSaveAsEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSaveAs="pageOrganizerSaveAs">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerSaveAs(args) {
        console.log(`Page organizer save triggered. File name: ${args.downloadDocument}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSaveAs="pageOrganizerSaveAs">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerSaveAs(args) {
        console.log(`Page organizer save triggered. File name: ${args.downloadDocument}`);
    }
</script>

pageRenderComplete

The pageRenderComplete event triggers after a page finishes rendering.

Event arguments: PageRenderCompleteEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageRenderComplete="pageRenderCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function pageRenderCompleted(args) {
        console.log(`Page ${args.data} rendering completed.`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageRenderComplete="pageRenderCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function pageRenderCompleted(args) {
        console.log(`Page ${args.data} rendering completed.`);
    }
</script>

pageRenderInitiate

The pageRenderInitiate event triggers when page rendering begins.

Event arguments: PageRenderInitiateEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageRenderInitiate="pageRenderInitiated">
    </ejs-pdfviewer>
</div>

<script>
    function pageRenderInitiated(args) {
        console.log(`Page ${args.jsonData} rendering initiated.`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageRenderInitiate="pageRenderInitiated">
    </ejs-pdfviewer>
</div>

<script>
    function pageRenderInitiated(args) {
        console.log(`Page ${args.jsonData} rendering initiated.`);
    }
</script>

printEnd

The printEnd event triggers when a print action is completed.

Event arguments: PrintEndEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   printEnd="printEnded">
    </ejs-pdfviewer>
</div>

<script>
    function printEnded(args) {
        console.log('Print action completed.');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   printEnd="printEnded">
    </ejs-pdfviewer>
</div>

<script>
    function printEnded(args) {
        console.log('Print action completed.');
    }
</script>

printStart

The printStart event triggers when a print action is initiated.

Event arguments: PrintStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   printStart="printStarted">
    </ejs-pdfviewer>
</div>

<script>
    function printStarted(args) {
        console.log('Print action initiated.');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   printStart="printStarted">
    </ejs-pdfviewer>
</div>

<script>
    function printStarted(args) {
        console.log('Print action initiated.');
    }
</script>

removeSignature

The removeSignature event triggers when a signature is removed.

Event arguments: RemoveSignatureEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   removeSignature="removeSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function removeSignatured(args) {
        console.log(`Signature removed from page ${args.bounds}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   removeSignature="removeSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function removeSignatured(args) {
        console.log(`Signature removed from page ${args.bounds}`);
    }
</script>

resizeSignature

The resizeSignature event triggers when a signature is resized.

Event arguments: ResizeSignatureEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   resizeSignature="resizeSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function resizeSignatured(args) {
        console.log(`Signature resized on page ${args.currentPosition}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   resizeSignature="resizeSignatured">
    </ejs-pdfviewer>
</div>

<script>
    function resizeSignatured(args) {
        console.log(`Signature resized on page ${args.currentPosition}`);
    }
</script>

resourcesLoaded

The resourcesLoaded event triggers after PDFium resources are loaded.

Event arguments: void.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   resourcesLoaded="resourcesLoaded">
    </ejs-pdfviewer>
</div>

<script>
    function resourcesLoaded(args) {
        console.log('PDFium resources loaded.');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   resourcesLoaded="resourcesLoaded">
    </ejs-pdfviewer>
</div>

<script>
    function resourcesLoaded(args) {
        console.log('PDFium resources loaded.');
    }
</script>

signaturePropertiesChange

The signaturePropertiesChange event triggers when signature properties are changed.

Event arguments: SignaturePropertiesChangeEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function signaturePropertiesChanged(args) {
        console.log(`Signature properties changed on page ${args.type}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function signaturePropertiesChanged(args) {
        console.log(`Signature properties changed on page ${args.type}`);
    }
</script>

signatureSelect

The signatureSelect event triggers when a signature is selected.

Event arguments: SignatureSelectEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signatureSelect="signatureSelected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureSelected(args) {
        console.log(`Signature selected on page ${args.signature}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signatureSelect="signatureSelected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureSelected(args) {
        console.log(`Signature selected on page ${args.signature}`);
    }
</script>

signatureUnselect

The signatureUnselect event triggers when a signature is unselected.

Event arguments: SignatureUnselectEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signatureUnselect="signatureUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureUnselected(args) {
        console.log(`Signature unselected ${args.signature}`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   signatureUnselect="signatureUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureUnselected(args) {
        console.log(`Signature unselected ${args.signature}`);
    }
</script>

textSearchComplete

The textSearchComplete event triggers when a text search is completed.

Event arguments: TextSearchCompleteEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchComplete="textSearchCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchCompleted(args) {
        console.log('Text search completed.');
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchComplete="textSearchCompleted">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchCompleted(args) {
        console.log('Text search completed.');
    }
</script>

textSearchHighlight

The textSearchHighlight event triggers when the searched text is highlighted.

Event arguments: TextSearchHighlightEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchHighlight="textSearchHighlight">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchHighlight(args) {
        console.log(`Search result ${args.bounds} highlighted.`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchHighlight="textSearchHighlight">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchHighlight(args) {
        console.log(`Search result ${args.bounds} highlighted.`);
    }
</script>

textSearchStart

The textSearchStart event triggers when a text search is initiated.

Event arguments: TextSearchStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchStart="textSearchStarted">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchStarted(args) {
        console.log(`Text search started for: "${args.searchText}"`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSearchStart="textSearchStarted">
    </ejs-pdfviewer>
</div>

<script>
    function textSearchStarted(args) {
        console.log(`Text search started for: "${args.searchText}"`);
    }
</script>

textSelectionEnd

The textSelectionEnd event triggers when text selection is complete.

Event arguments: TextSelectionEndEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSelectionEnd="textSelectionEnded">
    </ejs-pdfviewer>
</div>

<script>
    function textSelectionEnded(args) {
        console.log(`Text search started for: "${args.searchText}"`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSelectionEnd="textSelectionEnded">
    </ejs-pdfviewer>
</div>

<script>
    function textSelectionEnded(args) {
        console.log(`Text search started for: "${args.searchText}"`);
    }
</script>

textSelectionStart

The textSelectionStart event triggers when text selection is initiated.

Event arguments: TextSelectionStartEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSelectionStart="textSelectionStarted">
    </ejs-pdfviewer>
</div>

<script>
    function textSelectionStarted(args) {
        console.log(`Text selection started on page ${args.pageIndex}.`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   textSelectionStart="textSelectionStarted">
    </ejs-pdfviewer>
</div>

<script>
    function textSelectionStarted(args) {
        console.log(`Text selection started on page ${args.pageIndex}.`);
    }
</script>

thumbnailClick

The thumbnailClick event triggers when a thumbnail is clicked.

Event arguments: ThumbnailClickEventArgs.

Example:

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   thumbnailClick="thumbnailClicked">
    </ejs-pdfviewer>
</div>

<script>
    function thumbnailClicked(args) {
        console.log(`Thumbnail clicked for page index ${args.pageNumber}.`);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   thumbnailClick="thumbnailClicked">
    </ejs-pdfviewer>
</div>

<script>
    function thumbnailClicked(args) {
        console.log(`Thumbnail clicked for page index ${args.pageNumber}.`);
    }
</script>

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