Syncfusion AI Assistant

How can I help you?

Overview of Angular PDF Viewer Component

13 Feb 20263 minutes to read

The Angular PDF Viewer component is a lightweight, modular viewer for displaying and printing PDF files. It provides core interactions such as zooming, scrolling, text search, text selection, and text copy. Thumbnail, bookmark, hyperlink and table-of-contents support enable efficient navigation within PDF files.

Setup

Create an Angular application

Use the Angular CLI to set up an Angular application. To install the Angular CLI, run:

npm install -g @angular/cli

Create a new Angular application with the Angular CLI:

ng new my-app
cd my-app

Adding the Syncfusion PDF Viewer package

All Syncfusion Angular packages are published on the npm registry. To add the Angular PDF Viewer package, run:

ng add @syncfusion/ej2-angular-pdfviewer

This command performs the following configuration in the Angular app:

  • Adds the @syncfusion/ej2-angular-pdfviewer package and its peer dependencies to package.json.
  • Imports the PdfViewerModule into the application module (app.module.ts).
  • Registers the Syncfusion UI default theme (Material) in angular.json.

After these changes, the Syncfusion Angular PDF Viewer module is available for use in the application.

Adding CSS references for PDF Viewer

Add the required CSS references for the PDF Viewer to src/styles.css from the ../node_modules/@syncfusion package folder.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import "../node_modules/@syncfusion/ej2-angular-pdfviewer/styles/material.css";

Add PDF Viewer component

In src/app/app.ts`, use selector in the template attribute of the @Component directive to render the Syncfusion Angular PDF Viewer component.

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

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
  ngOnInit(): void {
  }
}

Key Features

  • View PDF Document - Open and display both normal and protected PDF files.
  • Annotations - Annotate documents with text markup, shapes, stamps, ink, and sticky notes. Form filling and form designing are supported.
  • Form Fields - Create and fill form fields; supports form designing features.
  • Signature - Support for hand-written and digital signatures.
  • Toolbar - Built-in and customizable toolbars for common PDF Viewer actions.
  • Navigation - Navigate using bookmarks, thumbnails, hyperlinks, and the table of contents.
  • Magnification - Fit-to-page, fit-to-width, and automatic fit options.
  • Search - Search text across the PDF document.
  • Core Interactions - Scrolling, zooming, panning, selection, and page navigation.
  • Print - Print the entire document or specific pages from the browser.
  • Globalization - Built-in support for localizing the UI.

Supported Web platforms