Search results

Print in Angular PDF Viewer component

08 Dec 2022 / 1 minute to read

The PDF Viewer supports printing the loaded PDF file. You can enable/disable the print using the following code snippet.

Copied to clipboard
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'
                 [enablePrint]='true'
                 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://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
  public document = 'PDF_Succinctly.pdf';
  ngOnInit(): void {
  }
}

Alt text

You can invoke print action using the following code snippet.,

Copied to clipboard
<script>
    window.onload = function () {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.print.print();
    }
</script>

See also