Keyboard accessibility in EJ2 TypeScript Pdfviewer control
13 Sep 20235 minutes to read
The Typescript PDF Viewer supports the following keyboard interactions.
Action | Windows | Macintosh |
---|---|---|
Shortcuts for page navigation | ||
Navigate to the first page | Home | Function + Left arrow |
Navigate to the last page | End | Function + Right arrow |
Navigate to the previous page | Up Arrow | Up Arrow |
Navigate to the next page | Down Arrow | Down Arrow |
Shortcuts for Zooming | ||
Perform zoom-in operation | CONTROL + = | COMMAND + = |
Perform zoom-out operation | CONTROL + - | COMMAND + - |
Retain the zoom level to 1 | CONTROL + 0 | COMMAND + 0 |
Shortcut for Text Search | ||
Open the search toolbar | CONTROL + F | COMMAND + F |
Shortcut for Text Selection | ||
Copy the selected text or annotation or form field | CONTROL + C | COMMAND + C |
Cut the selected text or annotation of the form field | CONTROL + X | COMMAND + X |
Paste the selected text or annotation or form field | CONTROL + Y | COMMAND + Y |
Shortcuts for the general operation | ||
Undo the action | CONTROL + Z | COMMAND + Z |
Redo the action | CONTROL + Y | COMMAND + Y |
Print the document | CONTROL + P | COMMAND + P |
Delete the annotations and form fields | Delete | Delete |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>
<body>
<!--Element which will render as PdfViewer -->
<div id="PdfViewer"></div>
</body>
</html>
```ts
import {
PdfViewer,
Toolbar,
Magnification,
Navigation,
Annotation,
LinkAnnotation,
ThumbnailView,
BookmarkView,
TextSelection} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(
Toolbar,
Magnification,
Navigation,
Annotation,
LinkAnnotation,
ThumbnailView,
BookmarkView,
TextSelection);
let pdfviewer: PdfViewer = new PdfViewer({documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
pdfviewer.appendTo('#PdfViewer');
```
```ts
import {
PdfViewer,
Toolbar,
Magnification,
Navigation,
Annotation,
LinkAnnotation,
ThumbnailView,
BookmarkView,
TextSelection} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(
Toolbar,
Magnification,
Navigation,
Annotation,
LinkAnnotation,
ThumbnailView,
BookmarkView,
TextSelection);
let pdfviewer: PdfViewer = new PdfViewer({documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
pdfviewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
pdfviewer.appendTo('#PdfViewer');
```