How can I help you?
Events in TypeScript PDF Viewer
17 Feb 202624 minutes to read
The PDF Viewer component triggers events for creation, page navigation, document lifecycle, 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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
bookmarkClick: function (args: any) {
console.log(`Bookmark clicked: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
toolbarClick: function (args: any) {
console.log(`Toolbar item clicked: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer);
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.enableFormFieldsValidation = true;
viewer.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);
};
viewer.appendTo('#pdfViewer');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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
zoomChange: function (args: any) {
console.log(`Zoom changed to: ${args.zoomValue}%`);
}
});
viewer.appendTo('#pdfViewer');buttonFieldClick
The buttonFieldClick event triggers when a button form field is clicked.
- Event arguments: ButtonFieldClickEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
buttonFieldClick: function (args: any) {
console.log(`Button field clicked. Name: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');commentAdd
The commentAdd event triggers when a comment is added in the comment panel.
- Event arguments: CommentEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
commentAdd: function (args: any) {
console.log(`Comment added. Id: ${args.id}`);
}
});
viewer.appendTo('#pdfViewer');commentDelete
The commentDelete event triggers when a comment is deleted in the comment panel.
- Event arguments: CommentEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
commentDelete: function (args: any) {
console.log(`Comment deleted. Id: ${args.id}`);
}
});
viewer.appendTo('#pdfViewer');commentEdit
The commentEdit event triggers when a comment is edited in the comment panel.
- Event arguments: CommentEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
commentEdit: function (args: any) {
console.log(`Comment edited. Id: ${args.id}`);
}
});
viewer.appendTo('#pdfViewer');commentSelect
The commentSelect event triggers when a comment is selected in the comment panel.
- Event arguments: CommentEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
commentSelect: function (args: any) {
console.log(`Comment selected. Id: ${args.id}`);
}
});
viewer.appendTo('#pdfViewer');commentStatusChanged
The commentStatusChanged event triggers when a comment status is changed in the comment panel.
- Event arguments: CommentEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
commentStatusChanged: function (args: any) {
console.log(`Comment status changed. Id: ${args.id}, Status: ${args.status}`);
}
});
viewer.appendTo('#pdfViewer');created
The created event is triggered during the creation of the PDF Viewer component.
- Event arguments:
void.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
created: function (args: any) {
console.log('PDF Viewer created');
}
});
viewer.appendTo('#pdfViewer');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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
customContextMenuBeforeOpen: function (args: any) {
console.log(`Before open context menu at page ${args.name}`);
}
});
const menuItems: any[] = [
{
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,
},
];
viewer.appendTo("#pdfViewer");
viewer.documentLoad = function (args) {
viewer.addCustomMenu(menuItems, false, false);
};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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
customContextMenuSelect: function (args: any) {
console.log(`Context menu item selected: ${args.name}`);
}
});
const menuItems: any[] = [
{
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,
},
];
viewer.appendTo("#pdfViewer");
viewer.documentLoad = function (args) {
viewer.addCustomMenu(menuItems, false, false);
};documentLoad
The documentLoad event occurs after a document is successfully loaded and parsed.
- Event arguments: LoadEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
});
viewer.appendTo('#pdfViewer');
viewer.documentLoad = function (args) {
console.log(`Document loaded: page count = ${args.pageData}`);
};documentLoadFailed
The documentLoadFailed event triggers when loading a document fails.
- Event arguments: LoadFailedEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/invalid.pdf',
});
viewer.appendTo('#pdfViewer');
viewer.documentLoadFailed = function (args) {
console.log(`Load failed. Error: ${args.documentName}`);
}documentUnload
The documentUnload event triggers when closing the current document.
- Event arguments: UnloadEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
});
viewer.appendTo('#pdfViewer');
viewer.documentUnload = function (args) {
console.log('Document unloaded');
}downloadEnd
The downloadEnd event triggers after a document download completes.
- Event arguments: DownloadEndEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
downloadEnd: function (args: any) {
console.log(`Download finished. File name: ${args.fileName}`);
}
});
viewer.appendTo('#pdfViewer');downloadStart
The downloadStart event triggers when the download operation is initiated.
- Event arguments: DownloadStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
downloadStart: function (args: any) {
console.log('Download started');
}
});
viewer.appendTo('#pdfViewer');exportFailed
The exportFailed event triggers when exporting annotations fails.
- Event arguments: ExportFailureEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
exportFailed: function (args: any) {
console.log(`Export failed: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');exportStart
The exportStart event triggers when exporting annotations starts.
- Event arguments: ExportStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
exportStart: function (args: any) {
console.log('Export started');
}
});
viewer.appendTo('#pdfViewer');exportSuccess
The exportSuccess event triggers when annotations are exported successfully.
- Event arguments: ExportSuccessEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
exportSuccess: function (args: any) {
console.log('Export success');
}
});
viewer.appendTo('#pdfViewer');extractTextCompleted
The extractTextCompleted event triggers when text extraction completes.
- Event arguments: ExtractTextCompletedEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
extractTextCompleted: function (args: any) {
console.log(`Extracted text length: ${(args.documentTextCollection || '').length}`);
}
});
viewer.appendTo('#pdfViewer');hyperlinkClick
The hyperlinkClick event triggers when a hyperlink is clicked.
- Event arguments: HyperlinkClickEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
hyperlinkClick: function (args: any) {
console.log(`Hyperlink clicked: ${args.hyperlink}`);
}
});
viewer.appendTo('#pdfViewer');hyperlinkMouseOver
The hyperlinkMouseOver event triggers when hovering over a hyperlink.
- Event arguments: HyperlinkMouseOverArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
hyperlinkMouseOver: function (args: any) {
console.log(`Hyperlink hover at page: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');importFailed
The importFailed event triggers when importing annotations fails.
- Event arguments: ImportFailureEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
importFailed: function (args: any) {
console.log(`Import failed: ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');importStart
The importStart event triggers when importing annotations starts.
- Event arguments: ImportStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
importStart: function (args: any) {
console.log('Import started');
}
});
viewer.appendTo('#pdfViewer');importSuccess
The importSuccess event triggers when annotations are imported successfully.
- Event arguments: ImportSuccessEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
importSuccess: function (args: any) {
console.log('Import success');
}
});
viewer.appendTo('#pdfViewer');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:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
});
viewer.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,
},
},
],
};
viewer.appendTo('#pdfViewer');
viewer.keyboardCustomCommands = (args: any): void => {
console.log('Custom command triggered:', args);
};moveSignature
The moveSignature event triggers when a signature is moved across the page.
- Event arguments:
MoveSignatureEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
moveSignature: function (args: any) {
console.log(`Signature moved on page ${args.id}`);
}
});
viewer.appendTo('#pdfViewer');pageChange
The pageChange event triggers when the current page number changes (for example, via scrolling or navigation controls).
- Event arguments: PageChangeEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageChange: function (args: any) {
console.log(`Page changed from ${args.previousPageNumber} to ${args.currentPageNumber}`);
}
});
viewer.appendTo('#pdfViewer');pageClick
The pageClick event triggers when a mouse click occurs on a page.
- Event arguments: PageClickEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageClick: function (args: any) {
console.log(`Page ${args.pageNumber} clicked at (${args.x}, ${args.y})`);
}
});
viewer.appendTo('#pdfViewer');pageMouseover
The pageMouseover event triggers when the mouse moves over a page.
- Event arguments:
PageMouseoverEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageMouseover: function (args: any) {
console.log(`Mouse over page ${args.name}`);
}
});
viewer.appendTo('#pdfViewer');pageOrganizerSaveAs
The pageOrganizerSaveAs event triggers when a Save As action is performed in the page organizer.
- Event arguments:
PageOrganizerSaveAsEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageOrganizerSaveAs: function (args: any) {
console.log(`Page organizer save triggered. File name: ${args.downloadDocument}`);
}
});
viewer.appendTo('#pdfViewer');pageRenderComplete
The pageRenderComplete event triggers after a page finishes rendering.
- Event arguments: PageRenderCompleteEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageRenderComplete: function (args: any) {
console.log(`Page ${args.data} rendering completed.`);
}
});
viewer.appendTo('#pdfViewer');pageRenderInitiate
The pageRenderInitiate event triggers when page rendering begins.
- Event arguments: PageRenderInitiateEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
pageRenderInitiate: function (args: any) {
console.log(`Page ${args.jsonData} rendering initiated.`);
}
});
viewer.appendTo('#pdfViewer');printEnd
The printEnd event triggers when a print action completes.
- Event arguments: PrintEndEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
printEnd: function (args: any) {
console.log('Print action completed.');
}
});
viewer.appendTo('#pdfViewer');printStart
The printStart event triggers when a print action is initiated.
- Event arguments: PrintStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
printStart: () => {
console.log('Print action initiated.');
}
});
viewer.appendTo('#pdfViewer');removeSignature
The removeSignature event triggers when a signature is removed.
- Event arguments: RemoveSignatureEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
removeSignature: function (args: any) {
console.log(`Signature removed from page ${args.bounds}`);
}
});
viewer.appendTo('#pdfViewer');resizeSignature
The resizeSignature event triggers when a signature is resized.
- Event arguments: ResizeSignatureEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
resizeSignature: function (args: any) {
console.log(`Signature resized on page ${args.currentPosition}`);
}
});
viewer.appendTo('#pdfViewer');resourcesLoaded
The resourcesLoaded event triggers after the viewer’s required resources are loaded.
- Event arguments:
void.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
resourcesLoaded: function (args: any) {
console.log('PDFium resources loaded.');
}
});
viewer.appendTo('#pdfViewer');signaturePropertiesChange
The signaturePropertiesChange event triggers when signature properties change.
- Event arguments: SignaturePropertiesChangeEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
signaturePropertiesChange: function (args: any) {
console.log(`Signature properties changed on page ${args.type}`);
}
});
viewer.appendTo('#pdfViewer');signatureSelect
The signatureSelect event triggers when a signature is selected.
- Event arguments: SignatureSelectEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
signatureSelect: function (args: any) {
console.log(`Signature selected on page ${args.signature}`);
}
});
viewer.appendTo('#pdfViewer');signatureUnselect
The signatureUnselect event triggers when a signature is unselected.
- Event arguments: SignatureUnselectEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
signatureUnselect: function (args: any) {
console.log(`Signature unselected ${args.signature}`);
}
});
viewer.appendTo('#pdfViewer');textSearchComplete
The textSearchComplete event triggers when a text search completes.
- Event arguments: TextSearchCompleteEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
textSearchComplete: function (args: any) {
console.log('Text search completed.');
}
});
viewer.appendTo('#pdfViewer');textSearchHighlight
The textSearchHighlight event triggers when searched text is highlighted.
- Event arguments: TextSearchHighlightEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
textSearchHighlight: function (args: any) {
console.log(`Search result ${args.bounds} highlighted.`);
}
});
viewer.appendTo('#pdfViewer');textSearchStart
The textSearchStart event triggers when a text search is initiated.
- Event arguments: TextSearchStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
textSearchStart: function (args: any) {
console.log(`Text search started for: "${args.searchText}"`);
}
});
viewer.appendTo('#pdfViewer');textSelectionEnd
The textSelectionEnd event triggers when text selection is complete.
- Event arguments: TextSelectionEndEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
textSelectionEnd: function (args: any) {
console.log(`Text selection ended on page ${args.pageIndex}.`);
}
});
viewer.appendTo('#pdfViewer');textSelectionStart
The textSelectionStart event triggers when text selection is initiated.
- Event arguments:
TextSelectionStartEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
textSelectionStart: function (args: any) {
console.log(`Text selection started on page ${args.pageIndex}.`);
}
});
viewer.appendTo('#pdfViewer');thumbnailClick
The thumbnailClick event triggers when a thumbnail is clicked.
- Event arguments: ThumbnailClickEventArgs.
Example:
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
TextSelection, Annotation, FormDesigner, FormFields, ValidateFormFieldsArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
const viewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
thumbnailClick: function (args: any) {
console.log(`Thumbnail clicked for page index ${args.pageNumber}.`);
}
});
viewer.appendTo('#pdfViewer');Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic.