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>
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');