PDF Viewer Component for Angular 2

Demo page

Install

npm install ttv-ng2-pdf-viewer --save

Usage

In case you're using systemjs see configuration here.

Add PdfViewerComponent to your module's declarations

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

import { PdfViewerComponent } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, PdfViewerComponent],
  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>
  <div>
      <label>Page:</label>
      <input type="number" placeholder="Page" [(ngModel)]="page">
  </div>
  <pdf-viewer [src]="pdfSrc" 
              [page]="page" 
              [original-size]="true" 
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
  page: number = 1;
}

Options

• src
• page
• zoom
• original-size
• show-all
• after-load-complete

[src]

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]

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

[zoom]

Zoom pdf

[zoom]="0.5"

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

[show-all]

Show single or all pages altogether

[show-all]="true"

[after-load-complete]

Get PDF information with callback

First define callback function "callBackFn" in your controller,

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

And then use it in your template:

[after-load-complete]="callBackFn"

Develop

npm start

License

MIT © Vadym Yatsyuk