Search results

Accessibility in React PDF Viewer component

02 Feb 2023 / 2 minutes to read

The react 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
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
       ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
import { RouteComponentProps } from 'react-router';

export class App extends React.Component<{}, {}> {
  public viewer: PdfViewerComponent;
  render() {
    return (
    <div>
      <div className='control-section'>
        {/* Render the PDF Viewer */}
        <PdfViewerComponent
          ref={(scope) => { this.viewer = scope; }}
          id="container"
          documentPath="PDF_Succinctly.pdf"
          serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
          style={{ 'height': '640px' }}>

                <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
                                    ThumbnailView, Print,TextSelection, TextSearch]} />
        </PdfViewerComponent>
      </div>
    </div>);
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));