Syncfusion AI Assistant

How can I help you?

Custom Toolbar in Angular PDF Viewer

17 Apr 202624 minutes to read

The PDF Viewer provides APIs for the user interaction options available in its built-in toolbar. Using these APIs, a custom application-level toolbar can be created by hiding the default toolbar and adding Syncfusion EJ2 toolbar components.

Follow these steps to create a custom toolbar for the PDF Viewer:

Step 1: Create a simple PDF Viewer sample.

Create a simple PDF Viewer sample by following the getting started guide.

Step 2: Add HTML elements for the custom toolbar.

<ejs-pdfviewer #pdfviewer id='pdfViewer'
               [documentPath]='document'
               [enableToolbar]=false
               [enableNavigationToolbar]=false
               (pageChange)='pageChanged($event)'
               (documentLoad)='documentLoaded($event)'
               style="height:640px; display: block">
</ejs-pdfviewer>
<ejs-pdfviewer #pdfviewer id='pdfViewer'
               [serviceUrl]='service'
               [documentPath]='document'
               [enableToolbar]=false
               [enableNavigationToolbar]=false
               (pageChange)='pageChanged($event)'
               (documentLoad)='documentLoaded($event)'
               style="height:640px; display: block">
</ejs-pdfviewer>

Step 3: Import and inject the necessary modules.

Import and inject the modules required for the custom toolbar functionality:

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  BookmarkViewService,
  ThumbnailViewService,
  PrintService,
  TextSelectionService,
  TextSearchService,
} from '@syncfusion/ej2-angular-pdfviewer';

Step 4: Hide the default toolbar of the PDF Viewer.

Hide the default toolbar using enableToolbar and enableThumbnail properties:

<!-- app.html -->
<ejs-pdfviewer
  id="container"
  [enableToolbar]="false"
  [enableThumbnail]="false"
  [documentPath]="'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf'"
  [resourceUrl]="'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'"
  style="display: block; height: 640px;">
</ejs-pdfviewer>
<!-- app.html -->
<ejs-pdfviewer
  id="container"
  [enableToolbar]="false"
  [enableThumbnail]="false"
  [documentPath]="'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf'"
  [serviceUrl]="'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'"
  style="display: block; height: 640px;">
</ejs-pdfviewer>

Step 5: Add EJ2 Toolbar for primary actions.

Add Syncfusion EJ2 Toolbar components to perform primary actions like Open, Previous page, Next page, Go to page, Print, and Download:

<ejs-toolbar id='topToolbar' #customToolbar>
    <e-items>
        <e-item prefixIcon='e-pv-open-document-icon' id='openDocument' tooltipText='Open' (click)='openDocument($event)'>
        </e-item>
        <e-item prefixIcon='e-pv-previous-page-navigation-icon' id='previousPage' tooltipText='Previous Page' (click)='previousClicked($event)'
                align='Center'></e-item>
        <e-item prefixIcon='e-pv-next-page-navigation-icon' id='nextPage' tooltipText='Next Page' (click)='nextClicked($event)' align='Center'></e-item>
        <e-item align='Center'>
            <ng-template #template>
                <div class=''>
                    <input type='text' class='e-input-group e-pv-current-page-number' id='currentPage' value="0"
                           (keypress)='onCurrentPageBoxKeypress($event)' (click)='onCurrentPageBoxClicked($event)' />
                </div>
                <div style='margin-left: 6px'><span class='e-pv-total-page-number' id='totalPage'>of 0</span></div>
            </ng-template>
        </e-item>
        <e-item prefixIcon='e-pv-print-document-icon' tooltipText='Print' (click)='printClicked($event)' align='Right'></e-item>
        <e-item prefixIcon='e-pv-download-document-icon' tooltipText='Download' (click)='downloadClicked($event)' align='Right'></e-item>
    </e-items>
</ejs-toolbar>
<input type="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;">

Step 6: Add EJ2 Toolbar for magnification actions.

Add Syncfusion EJ2 Toolbar components to perform magnification actions in the PDF Viewer:

<ejs-toolbar id='magnificationToolbar' #zoomToolbar>
    <e-items>
        <e-item prefixIcon='e-pv-fit-page-icon' id='fitPage' tooltipText='Fit to page' (click)='pageFitClicked($event)'></e-item>
        <e-item prefixIcon='e-pv-zoom-in-icon' id='zoomIn' tooltipText='Zoom in' (click)='zoomInClicked($event)'></e-item>
        <e-item prefixIcon='e-pv-zoom-out-sample' id='zoomOut' tooltipText='Zoom out' (click)='zoomOutClicked($event)'></e-item>
    </e-items>
</ejs-toolbar>

Step 7: Add custom toolbar styling.

#magnificationToolbar {
    background: transparent;
    height: auto;
    min-height: 56px;
    width: 200px;
    border: none;
    position: absolute;
    z-index: 1001;
    bottom: 58px;
    right: 16px;
    transform: rotate(90deg);
}

#magnificationToolbar.e-toolbar .e-toolbar-items {
    background: transparent;
}

#magnificationToolbar.e-toolbar .e-tbar-btn {
    border-radius: 50%;
    min-height: 30px;
    min-width: 30px;
    border: 1px solid #c8c8c8;
}

#topToolbar {
    top: 0px;
    z-index: 1001;
}

.e-tbar-section .e-sample-resize-container {
    height: 46px;
}

.e-bookmark-popup {
    height: 200px;
    max-width: 250px;
}

.e-text-search-popup {
    height: 104px;
    max-width: 348px;
}

.e-custom-search-input {
    width: 234px;
}

.e-text-search-popup .e-footer-content, .e-bookmark-popup .e-footer-content {
    padding: 0;
    height: 0;
}

.search-button, .search-button:disabled, .search-button:focus, .search-button:hover  {
    background: transparent;
    box-shadow: none;
}

#popup .e-dlg-content {
    padding-left: 0;
    padding-bottom: 0;
}

.e-pv-bookmarks {
    min-width: 234px;
}

.e-pv-current-page-number {
    width: 46px;
    height: 28px;
    text-align: center;
}

.material .e-pv-current-page-number {
    border-width: 1px;
}

.e-icons {
    font-family: "e-icons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

.e-pv-icon::before {
    font-family: 'e-icons';
}

.e-pv-icon-search::before {
    font-family: 'e-icons';
    font-size: 12px;
}

.e-pv-download-document-icon::before {
    content: '\e914';
}

.e-pv-print-document-icon::before {
    content: '\e917';
}

.e-pv-previous-page-navigation-icon::before {
    content: '\e910';
}

.e-pv-next-page-navigation-icon::before {
    content: '\e911';
}

.e-pv-zoom-out-sample::before {
    content: '\e912';
}

.e-pv-zoom-out-sample {
    transform: rotate(90deg);
    padding-right: 2px;
}

.e-pv-zoom-in-icon::before {
    content: '\e91d';
}

.e-pv-fit-page-icon::before {
    content: '\e91b';
}

.e-pv-open-document-icon::before {
    content: '\e91c';
}

@font-face {
    font-family: "e-icons";
    font-style: normal;
    font-weight: normal;
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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ZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
}

The icons are embedded in the font file used in the previous code snippet.

Step 8: Add scripts for PDF Viewer user interaction.

@ViewChild('pdfviewer')
public pdfviewerControl: PdfViewerComponent;
@ViewChild('customToolbar')
public customToolbar: ToolbarComponent;
@ViewChild('zoomToolbar')
public zoomToolbar: ToolbarComponent;
public document: string = 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf';
constructor() { }
ngOnInit(): void {
  // ngOnInit function
  document
    .getElementById('fileUpload')
    .addEventListener('change', this.readFile.bind(this));
}

public openDocument(e: ClickEventArgs): void {
  document.getElementById('fileUpload').click();
}

public previousClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.navigation.goToPreviousPage();
}

public nextClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.navigation.goToNextPage();
}

public printClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.print.print();
}

public downloadClicked(e: ClickEventArgs): void {
  let fileName: string = (document.getElementById(
    'fileUpload'
  ) as HTMLInputElement).value
    .split('\\')
    .pop();
  if(fileName !== '') {
  this.pdfviewerControl.fileName = fileName;
}
this.pdfviewerControl.download();
}

public pageFitClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.fitToPage();
  this.updateZoomButtons();
  this.customToolbar.enableItems(document.getElementById('fitPage'), false);
}

public zoomInClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.zoomIn();
  this.updateZoomButtons();
}

public zoomOutClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.zoomOut();
  this.updateZoomButtons();
}

public pageChanged(e: PageChangeEventArgs): void {
  (document.getElementById(
  'currentPage'
) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
this.updatePageNavigation();
}

public documentLoaded(e: LoadEventArgs): void {
  document.getElementById('totalPage').textContent =
    'of ' + this.pdfviewerControl.pageCount;
  (document.getElementById(
      'currentPage'
    ) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
this.updatePageNavigation();
}

public onCurrentPageBoxClicked(e: ClickEventArgs): void {
  (document.getElementById('currentPage') as HTMLInputElement).select();
}

public onCurrentPageBoxKeypress(e: KeyboardEvent): boolean {
  if ((e.which < 48 || e.which > 57) && e.which !== 8 && e.which !== 13) {
    e.preventDefault();
    return false;
  } else {
    // tslint:disable-next-line:radix
    const currentPageNumber: number = parseInt(
      (document.getElementById('currentPage') as HTMLInputElement).value
    );
    if (e.which === 13) {
      if (
        currentPageNumber > 0 &&
        currentPageNumber <= this.pdfviewerControl.pageCount
      ) {
        this.pdfviewerControl.navigation.goToPage(currentPageNumber);
      } else {
        // tslint:disable-next-line:max-line-length
        (document.getElementById(
          'currentPage'
        ) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
      }
    }
    return true;
  }
}

private updatePageNavigation(): void {
  if(this.pdfviewerControl.currentPageNumber === 1) {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    false
  );
  this.customToolbar.enableItems(document.getElementById('nextPage'), true);
} else if (
  this.pdfviewerControl.currentPageNumber ===
  this.pdfviewerControl.pageCount
) {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    true
  );
  this.customToolbar.enableItems(
    document.getElementById('nextPage'),
    false
  );
} else {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    true
  );
  this.customToolbar.enableItems(document.getElementById('nextPage'), true);
}
}

private updateZoomButtons(): void {
  if(this.pdfviewerControl.zoomPercentage <= 50) {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), true);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), false);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
} else if (this.pdfviewerControl.zoomPercentage >= 400) {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), false);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), true);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
} else {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), true);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), true);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
}
}

// tslint:disable-next-line
private readFile(args: any): void {
  // tslint:disable-next-line
  let upoadedFiles: any = args.target.files;
  if(args.target.files[0] !== null) {
  let uploadedFile: File = upoadedFiles[0];
  if (uploadedFile) {
    let reader: FileReader = new FileReader();
    reader.readAsDataURL(uploadedFile);
    // tslint:disable-next-line
    let proxy: any = this;
    // tslint:disable-next-line
    reader.onload = (e: any): void => {
      let uploadedFileUrl: string = e.currentTarget.result;
      proxy.pdfviewerControl.load(uploadedFileUrl, null);
    };
  }
}
}
@ViewChild('pdfviewer')
public pdfviewerControl: PdfViewerComponent;
@ViewChild('customToolbar')
public customToolbar: ToolbarComponent;
@ViewChild('zoomToolbar')
public zoomToolbar: ToolbarComponent;
public service: string =
  'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
public document: string = 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf';
constructor() { }
ngOnInit(): void {
  // ngOnInit function
  document
    .getElementById('fileUpload')
    .addEventListener('change', this.readFile.bind(this));
}

public openDocument(e: ClickEventArgs): void {
  document.getElementById('fileUpload').click();
}

public previousClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.navigation.goToPreviousPage();
}

public nextClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.navigation.goToNextPage();
}

public printClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.print.print();
}

public downloadClicked(e: ClickEventArgs): void {
  let fileName: string = (document.getElementById(
    'fileUpload'
  ) as HTMLInputElement).value
    .split('\\')
    .pop();
  if(fileName !== '') {
  this.pdfviewerControl.fileName = fileName;
}
this.pdfviewerControl.download();
}

public pageFitClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.fitToPage();
  this.updateZoomButtons();
  this.customToolbar.enableItems(document.getElementById('fitPage'), false);
}

public zoomInClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.zoomIn();
  this.updateZoomButtons();
}

public zoomOutClicked(e: ClickEventArgs): void {
  this.pdfviewerControl.magnification.zoomOut();
  this.updateZoomButtons();
}

public pageChanged(e: PageChangeEventArgs): void {
  (document.getElementById(
  'currentPage'
) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
this.updatePageNavigation();
}

public documentLoaded(e: LoadEventArgs): void {
  document.getElementById('totalPage').textContent =
    'of ' + this.pdfviewerControl.pageCount;
  (document.getElementById(
      'currentPage'
    ) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
this.updatePageNavigation();
}

public onCurrentPageBoxClicked(e: ClickEventArgs): void {
  (document.getElementById('currentPage') as HTMLInputElement).select();
}

public onCurrentPageBoxKeypress(e: KeyboardEvent): boolean {
  if ((e.which < 48 || e.which > 57) && e.which !== 8 && e.which !== 13) {
    e.preventDefault();
    return false;
  } else {
    // tslint:disable-next-line:radix
    const currentPageNumber: number = parseInt(
      (document.getElementById('currentPage') as HTMLInputElement).value
    );
    if (e.which === 13) {
      if (
        currentPageNumber > 0 &&
        currentPageNumber <= this.pdfviewerControl.pageCount
      ) {
        this.pdfviewerControl.navigation.goToPage(currentPageNumber);
      } else {
        // tslint:disable-next-line:max-line-length
        (document.getElementById(
          'currentPage'
        ) as HTMLInputElement).value = this.pdfviewerControl.currentPageNumber.toString();
      }
    }
    return true;
  }
}

private updatePageNavigation(): void {
  if(this.pdfviewerControl.currentPageNumber === 1) {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    false
  );
  this.customToolbar.enableItems(document.getElementById('nextPage'), true);
} else if (
  this.pdfviewerControl.currentPageNumber ===
  this.pdfviewerControl.pageCount
) {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    true
  );
  this.customToolbar.enableItems(
    document.getElementById('nextPage'),
    false
  );
} else {
  this.customToolbar.enableItems(
    document.getElementById('previousPage'),
    true
  );
  this.customToolbar.enableItems(document.getElementById('nextPage'), true);
}
}

private updateZoomButtons(): void {
  if(this.pdfviewerControl.zoomPercentage <= 50) {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), true);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), false);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
} else if (this.pdfviewerControl.zoomPercentage >= 400) {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), false);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), true);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
} else {
  this.zoomToolbar.enableItems(document.getElementById('zoomIn'), true);
  this.zoomToolbar.enableItems(document.getElementById('zoomOut'), true);
  this.zoomToolbar.enableItems(document.getElementById('fitPage'), true);
}
}

// tslint:disable-next-line
private readFile(args: any): void {
  // tslint:disable-next-line
  let upoadedFiles: any = args.target.files;
  if(args.target.files[0] !== null) {
  let uploadedFile: File = upoadedFiles[0];
  if (uploadedFile) {
    let reader: FileReader = new FileReader();
    reader.readAsDataURL(uploadedFile);
    // tslint:disable-next-line
    let proxy: any = this;
    // tslint:disable-next-line
    reader.onload = (e: any): void => {
      let uploadedFileUrl: string = e.currentTarget.result;
      proxy.pdfviewerControl.load(uploadedFileUrl, null);
    };
  }
}
}

Find the sample of Toolbar Customization

See also