Angular 5+ PDF Viewer

PDF Viewer Component for Angular 5+

Overview

Install

npm install ng2-pdf-viewer --save

Note: For angular 4 or less use version 3.0.8

Usage

In case you're using systemjs see configuration here.

Add PdfViewerModule to your module's imports

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app/app.component';  import { PdfViewerModule } from 'ng2-pdf-viewer';  @NgModule({   imports: [BrowserModule, PdfViewerModule],   declarations: [AppComponent],   bootstrap: [AppComponent] })  class AppModule {}  platformBrowserDynamic().bootstrapModule(AppModule);

And then use it in your component

import { Component } from '@angular/core';  @Component({   selector: 'example-app',   template: `   <div>       <label>PDF src</label>       <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">   </div>   <pdf-viewer [src]="pdfSrc"                [render-text]="true"               style="display: block;"   ></pdf-viewer>   ` }) export class AppComponent {   pdfSrc: string = '/pdf-test.pdf'; }

Options

[src]

Property	Type	Required
[src]	string, object, UInt8Array	Required

Pass pdf location

[src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"

For more control you can pass options object to [src].

Options object for loading protected PDF would be

{  url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',  withCredentials: true }

See more attributes here.

[page]

Property	Type	Required
[page] or [(page)]	number	Required with [show-all]="false" or Optional with [show-all]="true"

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

[stick-to-page]

Property	Type	Required
[stick-to-page]	boolean	Optional

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

[stick-to-page]="true"

[render-text]

Property	Type	Required
[render-text]	boolean	Optional

Enable text rendering, allows to select text

[render-text]="true"

[render-text-mode]

Property	Type	Required
[render-text-mode]	RenderTextMode	Optional

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]

Property	Type	Required
[external-link-target]	string	Optional

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

Link target

blank
none
self
parent
top

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

[rotation]

Property	Type	Required
[rotation]	number	Optional

Rotate PDF

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

[rotation]="90"

[zoom]

Property	Type	Required
[zoom]	number	Optional

Zoom pdf

[zoom]="0.5"

[original-size]

Property	Type	Required
[original-size]	boolean	Optional

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]

Property	Type	Required
[fit-to-page]	boolean	Optional

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]

Property	Type	Required
[show-all]	boolean	Optional

Show single or all pages altogether

[show-all]="true"

[autoresize]

Property	Type	Required
[autoresize]	boolean	Optional

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]

Property	Type	Required
[c-maps-url]	string	Optional

Url for non-latin characters source maps.

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

Default url is: https://unpkg.com/[email protected]/cmaps/

To serve cmaps on your own you need to copy node_modules/pdfjs-dist/cmaps to assets/cmaps.

(after-load-complete)

Property	Type	Required
(after-load-complete)	callback	Optional

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)

Property	Type	Required
(page-rendered)	callback	Optional

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)"

(text-layer-rendered)

Property	Type	Required
(text-layer-rendered)	callback	Optional

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)

Property	Type	Required
(error)	callback	Optional

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)

Property	Type	Required
(on-progress)	callback	Optional

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]);   } }

Set custom path to the worker

By default the worker is loaded from cdnjs.cloudflare.com.

In your code update path to the worker to be for example /pdf.worker.js

(<any>window).pdfWorkerSrc = '/pdf.worker.js';

This should be set before pdf-viewer component is rendered.

Search in the PDF

Use pdfFindController for search functionality.

In your component's ts file:

Add reference to pdf-viewer,
then when needed execute search()

@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;  search(stringToSearch: string) {   this.pdfComponent.pdfFindController.executeCommand('find', {     caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: stringToSearch   }); }

Contribute

See CONTRIBUTING.md

Angular 2 PDF Viewer Component