Keyboard interaction

28 Sep 20237 minutes to read

The angular 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
import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
         ThumbnailViewService,ToolbarService, NavigationService,
         TextSearchService, AnnotationService, TextSelectionService,
         PrintService
       } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-container',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                          [documentPath]='document'
                          style="height:640px;display:block">
                </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               AnnotationService, TextSearchService, TextSelectionService,
               PrintService]
  })
  export class AppComponent implements OnInit {
      public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  }
import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
         ThumbnailViewService,ToolbarService, NavigationService,
         TextSearchService, AnnotationService, TextSelectionService,
         PrintService
       } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-container',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                          [serviceUrl]='service'
                          [documentPath]='document'
                          style="height:640px;display:block">
                </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               AnnotationService, TextSearchService, TextSelectionService,
               PrintService]
  })
  export class AppComponent implements OnInit {
      public service = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
      public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  }