Angular PDF Viewer

PDF Viewer Component for Angular 22+ (standalone)

Maintenance

This fork continues the original API surface with current Angular and pdf.js tooling.

Overview

• Install
• Requirements
• PDF.js assets
• Configuration
• Usage
• Zoneless support
• Options
• Render local PDF file
• Search in the PDF
• Contribute

Install

Angular >= 22

npm install @seba174/ng2-pdf-viewer

Standalone component, signal-based inputs/outputs, ships with FESM2022 bundles.

Requirements

• Angular 22.0.0 or newer.
• Node 22.22.3+ / 24.15.0+ / 26+.
• Modern browsers supported by Angular 22 and pdfjs-dist 6.x.

PDF.js assets

The viewer uses same-origin PDF.js assets by default. No CDN URLs are loaded by the library, and applications do not need a direct pdfjs-dist dependency just to serve the worker or cMaps.

Run the Angular schematic to configure the worker, cMaps, and viewer images:

ng add @seba174/ng2-pdf-viewer

If you configure assets manually, add these entries to the build target's assets array:

{
  "glob": "pdf.worker.min.mjs",
  "input": "node_modules/@seba174/ng2-pdf-viewer/assets/pdfjs/legacy/build",
  "output": "assets/pdfjs/legacy/build"
},
{
  "glob": "**/*",
  "input": "node_modules/@seba174/ng2-pdf-viewer/assets/pdfjs/cmaps",
  "output": "assets/pdfjs/cmaps"
},
{
  "glob": "**/*",
  "input": "node_modules/@seba174/ng2-pdf-viewer/assets/pdfjs/web/images",
  "output": "assets/pdfjs/web/images"
}

The default runtime paths are resolved against the document base URL:

• worker: assets/pdfjs/legacy/build/pdf.worker.min.mjs
• cMaps: assets/pdfjs/cmaps/
• viewer images: assets/pdfjs/web/images/

Static host MIME types

The PDF.js worker is an ES module. Browsers require the worker file to be served with a JavaScript MIME type, so static hosts must map .mjs files correctly.

The ng add schematic updates existing web.config files referenced by the selected project's build assets. If you configure IIS manually, add this under the root system.webServer section:

<system.webServer>
  <staticContent>
    <remove fileExtension=".mjs" />
    <mimeMap fileExtension=".mjs" mimeType="text/javascript" />
  </staticContent>
</system.webServer>

The worker request should return one of the browser-supported JavaScript content types, for example:

Content-Type: text/javascript

Configuration

Most applications do not need runtime configuration. If your app serves PDF.js assets from a different path, configure the viewer once during bootstrap:

import { providePdfViewer } from '@seba174/ng2-pdf-viewer';

bootstrapApplication(AppComponent, {
  providers: [
    providePdfViewer({
      workerSrc: '/static/pdfjs/pdf.worker.min.mjs',
      cMapsUrl: '/static/pdfjs/cmaps/',
      imageResourcesPath: '/static/pdfjs/web/images/'
    })
  ]
});

Relative values are resolved against the document base URL.

Usage

Add PdfViewerComponent to the imports array of the standalone component where you want to render a PDF.

import { Component } from '@angular/core';
import { PdfViewerComponent } from '@seba174/ng2-pdf-viewer';

@Component({
  selector: 'example-app',
  imports: [PdfViewerComponent],
  template: `
    <pdf-viewer
      [src]="pdfSrc"
      [render-text]="true"
      [original-size]="false"
      style="width: 400px; height: 500px"
    />
  `
})
export class AppComponent {
  pdfSrc = "./assets/pdf-test.pdf";
}

Zoneless support

PdfViewerComponent works in both zone-based and zoneless host applications. The component has no reactive template bindings — its template is a single container <div> and all rendering is delegated to pdf.js's imperative DOM API. Outputs go through output() signals, which automatically mark consumer components dirty.

Zoneless consumers can bootstrap as usual:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
}).catch(err => console.error(err));

No additional configuration is required on the library side.

Options

• [src]
• [(page)]
• [stick-to-page]
• [external-link-target]
• [render-text]
• [render-text-mode]
• [rotation]
• [zoom]
• [zoom-scale]
• [original-size]
• [fit-to-page]
• [show-all]
• [autoresize]
• [c-maps-url]
• [show-borders]
• (after-load-complete)
• (page-rendered)
• (pages-initialized)
• (text-layer-rendered)
• (error)
• (on-progress)

[src]

Pass pdf location

[src]="'./assets/pdf-test.pdf'"

For more control you can pass options object to [src]. See other attributes for the object here.

Options object for loading protected PDF would be:

{
 url: './assets/pdf-test.pdf',
 withCredentials: true
}

[page]

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

If you want that the two way data binding actually updates your page variable on page change/scroll - you have to be sure that you define the height of the container, for example:

pdf-viewer {
    height: 100vh;
}

[stick-to-page]

Sticks view to the page. Works in combination with [show-all]="true" and page.

[stick-to-page]="true"

[render-text]

Enable text rendering, allows to select text

[render-text]="true"

[render-text-mode]

Used in combination with [render-text]="true"

Controls if the text layer is enabled, and the selection mode that is used.

0 = RenderTextMode.DISABLED - disable the text selection layer

1 = RenderTextMode.ENABLED - enables the text selection layer

2 = RenderTextMode.ENHANCED - enables enhanced text selection

[render-text-mode]="1"

[external-link-target]

Used in combination with [render-text]="true"

Link target

• blank
• none
• self
• parent
• top

[external-link-target]="'blank'"

[rotation]

Rotate PDF

Allowed step is 90 degree, ex. 0, 90, 180

[rotation]="90"

[zoom]

Zoom pdf

[zoom]="0.5"

[zoom-scale]

Defines how the Zoom scale is computed when [original-size]="false", by default set to 'page-width'.

• 'page-width' with zoom of 1 will display a page width that take all the possible horizontal space in the container

• 'page-height' with zoom of 1 will display a page height that take all the possible vertical space in the container

• 'page-fit' with zoom of 1 will display a page that will be scaled to either width or height to fit completely in the container

[zoom-scale]="'page-width'"

[original-size]

• if set to true - size will be as same as original document
• if set to false - size will be as same as container block

[original-size]="true"

[fit-to-page]

Works in combination with [original-size]="true". You can show your document in original size, and make sure that it's not bigger then container block.

[fit-to-page]="false"

[show-all]

Show single or all pages altogether

[show-all]="true"

[autoresize]

Turn on or off auto resize.

!Important To make [autoresize] work - make sure that [original-size]="false" and pdf-viewer tag has max-width or display are set.

[autoresize]="true"

[c-maps-url]

Url for non-latin characters source maps.

[c-maps-url]="'assets/pdfjs/cmaps/'"

Default url is assets/pdfjs/cmaps/, resolved against the document base URL. You can also set the application default with providePdfViewer({ cMapsUrl }).

To use a different path, copy node_modules/@seba174/ng2-pdf-viewer/assets/pdfjs/cmaps to your chosen assets folder and pass that path to [c-maps-url].

[show-borders]

Show page borders

[show-borders]="true"

(after-load-complete)

Get PDF information with callback

First define callback function "callBackFn" in your controller,

callBackFn(pdf: PDFDocumentProxy) {
   // do anything with "pdf"
}

And then use it in your template:

(after-load-complete)="callBackFn($event)"

(page-rendered)

Get event when a page is rendered. Called for every page rendered.

Define callback in your component:

pageRendered(e: CustomEvent) {
  console.log('(page-rendered)', e);
}

And then bind it to <pdf-viewer>:

(page-rendered)="pageRendered($event)"

(pages-initialized)

Get event when the pages are initialized.

Define callback in your component:

pageInitialized(e: CustomEvent) {
  console.log('(pages-initialized)', e);
}

And then bind it to <pdf-viewer>:

(pages-initialized)="pageInitialized($event)"

(text-layer-rendered)

Get event when a text layer is rendered.

Define callback in your component:

textLayerRendered(e: CustomEvent) {
  console.log('(text-layer-rendered)', e);
}

And then bind it to <pdf-viewer>:

(text-layer-rendered)="textLayerRendered($event)"

(error)

Error handling callback

Define callback in your component's class

onError(error: any) {
  // do anything
}

Then add it to pdf-component in component's template

(error)="onError($event)"

(on-progress)

Loading progress callback - provides progress information total and loaded bytes. Is called several times during pdf loading phase.

Define callback in your component's class

onProgress(progressData: PDFProgressData) {
  // do anything with progress data. For example progress indicator
}

Then add it to pdf-component in component's template

(on-progress)="onProgress($event)"

Render local PDF file

In your html template add input:

<input (change)="onFileSelected()" type="file" id="file">

and then add onFileSelected method to your component:

onFileSelected() {
  let $img: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.pdfSrc = e.target.result;
    };

    reader.readAsArrayBuffer($img.files[0]);
  }
}

Search in the PDF

Use eventBus for the search functionality.

In your component's ts file:

• Add a signal viewChild() reference to pdf-viewer,
• then when needed execute search() like this:

import { Component, viewChild } from '@angular/core';
import { PdfViewerComponent } from '@seba174/ng2-pdf-viewer';

@Component({ /* ... */ })
export class AppComponent {
  private readonly pdfComponent = viewChild(PdfViewerComponent);

  search(stringToSearch: string) {
    this.pdfComponent()?.eventBus.dispatch('find', {
      query: stringToSearch, type: 'again', caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true
    });
  }
}

The legacy @ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent; decorator form still works but viewChild() is the modern API and matches Angular's signal direction.

Contribute

See CONTRIBUTING.md

License

MIT