Angular2 PDF Viewer
PDF Viewer Component for Angular 2
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
;;; ; @ {} ;
And then use it in your component
; @ pdfSrc: string = '/pdf-test.pdf'; page: number = 1;
Options
[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