The following table lists the keyboard shortcuts supported in DsPdfViewer that will help in performing a variety of supported operations more efficiently and make the DsPdfViewer components more accessible:
Shortcut Key | Key Code | Action | Action Description |
---|---|---|---|
Ctrl + "Numpad +" | 107 | zoomin | Zoom in. |
Ctrl + "+" | 187 | zoomin | Zoom in. |
Ctrl + "Numpad -" | 109 | zoomout | Zoom out. |
Ctrl + "-" | 189 | zoomout | Zoom out. |
Ctrl + 0 | 48 | zoom_pagesize | Zoom to 100%. |
Ctrl + 9 | 57 | zoom_clientsize | Zoom to page width. |
Ctrl + A | 65 | select_all | Select all text. |
R | 82 | rotate | Rotate clockwise. |
Shift + R | 82 | rotate | Rotate counterclockwise. |
H | 72 | pan | Enable the pan tool. |
S | 83 | selection | Enable the text selection tool. |
Spacebar | 32 | holdToPan | Press and hold the Spacebar to temporarily enable the pan. |
Ctrl + O | 79 | open | Open file from the local system. |
Ctrl + F | 70 | search | Open the search panel. |
Ctrl + P | 80 | Print document. | |
Left Arrow | 37 | move_caret_left | Move the caret (text cursor) left. |
Up Arrow | 38 | move_caret_up | Move the caret up. |
Down Arrow | 40 | move_caret_down | Move the caret down. |
Right Arrow | 39 | move_caret_right | Move the caret right. |
Home | 36 | move_caret_sequence_start | Move the caret to the start of the sequence. |
Ctrl + Home | 36 | move_caret_document_start | Move the caret to the start of the document. |
End | 35 | move_caret_sequence_end | Move the caret to the end of the sequence. |
Ctrl + End | 35 | move_caret_document_end | Move the caret to the end of the document. |
Ctrl + Enter | 13 | confirm-ok | Confirm changes. |
ESC | 27 | confirm-cancel | Cancel changes |
Page Up | 33 | scrollUp | Scroll up. |
Page Down | 34 | scrollDown | Scroll down. |
DsPdfViewer also supports redefining, disabling, overriding, and removing the default keyboard shortcuts, as well as binding the default keyboard shortcuts to other keys and creating custom keyboard shortcuts via API using shortcuts option of ViewerOptions class.
DsPdfViewer supports binding any tool to any keyboard shortcut key. The following are the available built-in tools accessible through keyboard shortcut keys:
Keyboard Shortcut Tools | |
---|---|
zoomin |
move_caret_left |
zoomout |
move_caret_up |
zoom_pagesize |
move_caret_down |
zoom_clientsize |
move_caret_right |
select_all |
move_caret_sequence_start |
rotate |
move_caret_document_start |
pan |
move_caret_sequence_end |
selection |
move_caret_document_end |
holdToPan |
confirm-ok |
open |
confirm-cancel |
search |
scrollUp |
|
scrollDown |
Refer to the following example code to bind the holdToPan action to “P” key:
Copy Code
|
|
---|---|
// Bind the "P" shortcut to the holdToPan action and leave the Ctrl+P shortcut for the "print" action. viewer.options.shortcuts["P"] = [{ ctrl: true, tool: "print" }, { tool: "holdToPan" }]; |
Refer to the following example code to disable holdToPan keyboard shortcut:
Copy Code
|
|
---|---|
/* Initialize DsPdfViewer and set the function(event) for both keys to null. */ var viewer = new DsPdfViewer("#viewer", { shortcuts: { "Z": { ctrl: true, tool: function(event) { } }, "Y": { ctrl: true, tool: function(event) { } } } }); // Disable holdToPan shortcut. viewer.options.shortcuts["32"] = () => { }; |
Refer to the following example code to remove all default keyboard shortcuts:
Copy Code
|
|
---|---|
// Initialize DsPdfViewer and set the shortcuts to null. var viewer = new DsPdfViewer("#root"); viewer.options.shortcuts = { }; |
Refer to the following example code to override Ctrl + “Numpad +“ keyboard shortcut:
Copy Code
|
|
---|---|
/* Initialize DsPdfViewer and set the function(event) to zoom the PDF page to 10%. */ var viewer = new DsPdfViewer("#root", { shortcuts: { 107: { ctrl: true, tool: function(event) { DsPdfViewer.findControl("#root").zoomValue += 10; event.preventDefault(); } } } }); |
Refer to the following example code to create a custom keyboard shortcut:
Copy Code
|
|
---|---|
/* Create a custom keyboard shortcut to alert the user that Ctrl+Alt+E is pressed. */ viewer.options.shortcuts["E"] = { ctrl: true, alt: true, tool: function(e) { alert("Ctrl+Alt+E pressed."); } }; |