PDF Viewer Component for Angular 2+

Demo page

https://vadimdez.github.io/ng2-pdf-viewer/

Blog post

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

Install

npm install ng2-pdf-viewer --save

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]
• [(page)]
• [stick-to-page]
• [external-link-target]
• [render-text]
• [rotation]
• [zoom]
• [original-size]
• [fit-to-page]
• [show-all]
• [autoresize]
• (after-load-complete)
• (error)
• (on-progress)

[src]

accepts: string, object, UInt8Array

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]

number

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

[stick-to-page]

boolean

Works in combination with page and sticks view to the page

[stick-to-page]="true"

[render-text]

boolean

Enable text rendering, allows to select text

[render-text]="true"

[external-link-target]

string

Link target

• blank
• none
• self
• parent
• top

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

[rotation]

number

Rotate PDF

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

[rotation]="90"

[zoom]

number

Zoom pdf

[zoom]="0.5"

[original-size]

boolean

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]

boolean

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]

boolean

Show single or all pages altogether

[show-all]="true"

[autoresize]

boolean

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 dipslay are set.

[autoresize]="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)"

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

Contribute

Clone the project

npm start

and then open

http://localhost:8000/

License

MIT © Vadym Yatsyuk