PDF Viewer Component for Angular 2
npm install ng2-pdf-viewer --save
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;
}
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]="1"
supports two way data binding as well
[(page)]="pageVariable"
Zoom pdf
[zoom]="0.5"
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 single or all pages altogether
[show-all]="true"
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:
[on-load-complete]="callBackFn"
npm start