PDF Viewer Component for Angular 5+
https://vadimdez.github.io/ng2-pdf-viewer/
https://stackblitz.com/edit/ng2-pdf-viewer
https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76
- Install
- Usage
- Options
- Render local PDF file
- Set custom path to the worker
- Search in the PDF
- Contribute
npm install ng2-pdf-viewer --save
Note: For angular 4 or less use version 3.0.8
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: `
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
style="display: block;"
></pdf-viewer>
`
})
export class AppComponent {
pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}
- [src]
- [(page)]
- [stick-to-page]
- [external-link-target]
- [render-text]
- [render-text-mode]
- [rotation]
- [zoom]
- [zoom-scale]
- [original-size]
- [fit-to-page]
- [show-all]
- [autoresize]
- [c-maps-url]
- [show-borders]
- (after-load-complete)
- (page-rendered)
- (text-layer-rendered)
- (error)
- (on-progress)
Property | Type | Required |
---|---|---|
[src] | string, object, UInt8Array | Required |
Pass pdf location
[src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"
For more control you can pass options object to [src]
. See other attributes for the object here.
Options object for loading protected PDF would be:
{
url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',
withCredentials: true
}
Property | Type | Required |
---|---|---|
[page] or [(page)] | number | Required with [show-all]="false" or Optional with [show-all]="true" |
Page number
[page]="1"
supports two way data binding as well
[(page)]="pageVariable"
If you want that the two way data binding
actually updates your page
variable on page change/scroll - you have to be sure that you define the hight of the container, for example:
pdf-viewer {
display: block;
height: 100vh;
}
Property | Type | Required |
---|---|---|
[stick-to-page] | boolean | Optional |
Sticks view to the page. Works in combination with [show-all]="true"
and page
.
[stick-to-page]="true"
Property | Type | Required |
---|---|---|
[render-text] | boolean | Optional |
Enable text rendering, allows to select text
[render-text]="true"
Property | Type | Required |
---|---|---|
[render-text-mode] | RenderTextMode | Optional |
Used in combination with [render-text]="true"
Controls if the text layer is enabled, and the selection mode that is used.
0 = RenderTextMode.DISABLED.
- disable the text selection layer
1 = RenderTextMode.ENABLED.
- enables the text selection layer
2 = RenderTextMode.ENHANCED
- enables enhanced text selection
[render-text-mode]="1"
Property | Type | Required |
---|---|---|
[external-link-target] | string | Optional |
Used in combination with [render-text]="true"
Link target
blank
none
self
parent
top
[external-link-target]="'blank'"
Property | Type | Required |
---|---|---|
[rotation] | number | Optional |
Rotate PDF
Allowed step is 90 degree, ex. 0, 90, 180
[rotation]="90"
Property | Type | Required |
---|---|---|
[zoom] | number | Optional |
Zoom pdf
[zoom]="0.5"
Property | Type | Required |
---|---|---|
[zoom-scale] | 'page-width'|'page-fit'|'page-height' | Optional |
Defines how the Zoom scale is computed when [original-size]="false"
, by default set to 'page-width'.
-
'page-width' with zoom of 1 will display a page width that take all the possible horizontal space in the container
-
'page-height' with zoom of 1 will display a page height that take all the possible vertical space in the container
-
'page-fit' with zoom of 1 will display a page that will be scaled to either width or height to fit completely in the container
[zoom-scale]="page-width"
Property | Type | Required |
---|---|---|
[original-size] | boolean | Optional |
- 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"
Property | Type | Required |
---|---|---|
[fit-to-page] | boolean | Optional |
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"
Property | Type | Required |
---|---|---|
[show-all] | boolean | Optional |
Show single or all pages altogether
[show-all]="true"
Property | Type | Required |
---|---|---|
[autoresize] | boolean | Optional |
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 display
are set.
[autoresize]="true"
Property | Type | Required |
---|---|---|
[c-maps-url] | string | Optional |
Url for non-latin characters source maps.
[c-maps-url]="'assets/cmaps/'"
Default url is: https://unpkg.com/[email protected]/cmaps/
To serve cmaps on your own you need to copy node_modules/pdfjs-dist/cmaps
to assets/cmaps
.
Property | Type | Required |
---|---|---|
[show-borders] | boolean | Optional |
Show page borders
[show-borders]="true"
Property | Type | Required |
---|---|---|
(after-load-complete) | callback | Optional |
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)"
Property | Type | Required |
---|---|---|
(page-rendered) | callback | Optional |
Get event when a page is rendered. Called for every page rendered.
Define callback in your component:
pageRendered(e: CustomEvent) {
console.log('(page-rendered)', e);
}
And then bind it to <pdf-viewer>
:
(page-rendered)="pageRendered($event)"
Property | Type | Required |
---|---|---|
(text-layer-rendered) | callback | Optional |
Get event when a text layer is rendered.
Define callback in your component:
textLayerRendered(e: CustomEvent) {
console.log('(text-layer-rendered)', e);
}
And then bind it to <pdf-viewer>
:
(text-layer-rendered)="textLayerRendered($event)"
Property | Type | Required |
---|---|---|
(error) | callback | Optional |
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)"
Property | Type | Required |
---|---|---|
(on-progress) | callback | Optional |
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)"
In your html
template add input
:
<input (change)="onFileSelected()" type="file" id="file">
and then add onFileSelected
method to your component:
onFileSelected() {
let $img: any = document.querySelector('#file');
if (typeof (FileReader) !== 'undefined') {
let reader = new FileReader();
reader.onload = (e: any) => {
this.pdfSrc = e.target.result;
};
reader.readAsArrayBuffer($img.files[0]);
}
}
By default the worker
is loaded from cdnjs.cloudflare.com
.
In your code update path
to the worker to be for example /pdf.worker.js
(window as any).pdfWorkerSrc = '/pdf.worker.js';
This should be set before pdf-viewer
component is rendered.
Use pdfFindController
for search functionality.
In your component's ts file:
- Add reference to
pdf-viewer
, - then when needed execute search()
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;
search(stringToSearch: string) {
this.pdfComponent.pdfFindController.executeCommand('find', {
caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: stringToSearch
});
}
If this project help you reduce time to develop, you can give me a cup of tea :)
MIT ยฉ Vadym Yatsyuk