Keyboard accessibility in EJ2 TypeScript Pdfviewer control

13 Oct 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>

Standalone
Server-Backed
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');
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://services.syncfusion.com/js/production/api/pdfviewer';
pdfviewer.appendTo('#PdfViewer');