PDF Viewer Component for Angular 2+
https://vadimdez.github.io/ng2-pdf-viewer/
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>
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
style="display: block;"
></pdf-viewer>
`
})
export class AppComponent {
pdfSrc: string = '/pdf-test.pdf';
}
- [src]
- [(page)]
- [stick-to-page]
- [external-link-target]
- [render-text]
- [rotation]
- [zoom]
- [original-size]
- [show-all]
- [autoresize]
- (after-load-complete)
- (error)
- (on-progress)
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.
number
Page number
[page]="1"
supports two way data binding as well
[(page)]="pageVariable"
boolean
Works in combination with page
and sticks view to the page
[stick-to-page]="true"
boolean
Enable text rendering, allows to select text
[render-text]="true"
string
Link target
blank
none
self
parent
top
[external-link-target]="'blank'"
number
Rotate PDF
Allowed step is 90 degree, ex. 0, 90, 180
[rotation]="90"
number
Zoom pdf
[zoom]="0.5"
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"
Show single or all pages altogether
[show-all]="true"
Turn on or off auto resize
[autoresize]="true"
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 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)"
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)"
Clone the project
npm start
and then open
http://localhost:8000/