Syncfusion AI Assistant

How can I help you?

Customize Print Quality in Angular PDF Viewer

13 Apr 20263 minutes to read

This article shows a concise, task-oriented workflow to set and verify print quality for documents rendered by the Angular PDF Viewer by using the printScaleFactor property.

Goal: Set a suitable printScaleFactor to improve printed output sharpness while balancing performance and memory use.

Steps

1. Choose a target print quality.

  • Valid printScaleFactor values: 0.5 – 5. Higher values increase image sharpness and resource use.
  • Default value: 1.

2. Set printScaleFactor during initialization

It is recommended that you set the printScaleFactor in the viewer options during initialization.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    AnnotationService,
    FormFieldsService,
    FormDesignerService,
    PageOrganizerService,
  ],
  template: `
      <ejs-pdfviewer
        #pdfviewer
        id="PdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [printScaleFactor]="0.5"
        style="height: 100vh; width: 100%; display: block"
      >
      </ejs-pdfviewer>
    `,
})
export class AppComponent implements OnInit {
  @ViewChild('pdfviewer')
  public pdfviewerControl!: PdfViewerComponent;

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic (if needed)
  }
}

3. Set printScaleFactor after instantiation

As an alternative option, the printScaleFactor can be dynamically changed during runtime

  • TS
    • // Update printScaleFactor at runtime
pdfviewer.printScaleFactor = 2; // increase print resolution for upcoming prints

    4. Verify output

    Use browser Print Preview or produce a printed/PDF copy to confirm sharpness and acceptable render time.

    Notes

    • Values outside the supported range 0.5 – 5 will be ignored and fall back to the default (1).
    • Increasing printScaleFactor raises CPU, memory, and rendering time requirements. Test on target machines and documents before setting a higher factor.

    See Also