Angular 5+ PDF Viewer
> PDF Viewer Component for Angular 5+
### Demo page
[https://vadimdez.github.io/ng2-pdf-viewer/](https://vadimdez.github.io/ng2-pdf-viewer/)
#### Stackblitz Example
[https://stackblitz.com/edit/ng2-pdf-viewer](https://stackblitz.com/edit/ng2-pdf-viewer)
### Blog post
[https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76](https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76)
## Overview
* [Install](README.md#install)
* [Usage](README.md#usage)
* [Options](README.md#options)
* [Render local PDF file](README.md#render-local-pdf-file)
* [Set custom path to the worker](README.md#set-custom-path-to-the-worker)
* [Search in the PDF](README.md#search-in-the-pdf)
* [Contribute](README.md#contribute)
## Install
```
npm install angular-pdf-view --save
```
*Note: For angular 4 or less use version `3.0.8`*
## Usage
*In case you're using ```systemjs``` see configuration [here](https://github.com/VadimDez/ng2-pdf-viewer/blob/master/SYSTEMJS.md).*
Add ```PdfViewerModule``` to your module's ```imports```
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { PdfViewerModule } from 'angular-pdf-view';
@NgModule({
imports: [BrowserModule, PdfViewerModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
And then use it in your component
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: `
PDF src
`:
```angular2html
(page-rendered)="pageRendered($event)"
```
#### (text-layer-rendered)
| Property | Type | Required |
| --- | ---- | --- |
| (text-layer-rendered) | *callback* | *Optional* |
Get event when a text layer is rendered.
Define callback in your component:
```typescript
textLayerRendered(e: CustomEvent) {
console.log('(text-layer-rendered)', e);
}
```
And then bind it to ``:
```angular2html
(text-layer-rendered)="textLayerRendered($event)"
```
#### (error)
| Property | Type | Required |
| --- | ---- | --- |
| (error) | *callback* | *Optional* |
Error handling callback
Define callback in your component's class
```typescript
onError(error: any) {
// do anything
}
```
Then add it to `pdf-component` in component's template
```html
(error)="onError($event)"
```
#### (on-progress)
| 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
```typescript
onProgress(progressData: PDFProgressData) {
// do anything with progress data. For example progress indicator
}
```
Then add it to `pdf-component` in component's template
```html
(on-progress)="onProgress($event)"
```
## Render local PDF file
In your `html` template add `input`:
```html
window).pdfWorkerSrc = '/pdf.worker.js';
```
*This should be set before `pdf-viewer` component is rendered.*
## Search in the PDF
Use `pdfFindController` for search functionality.
In your component's ts file:
* Add reference to `pdf-viewer`,
* then when needed execute search()
```typescript
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;
search(stringToSearch: string) {
this.pdfComponent.pdfFindController.executeCommand('find', {
caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: stringToSearch
});
}
```
## Contribute
[See CONTRIBUTING.md](CONTRIBUTING.md)
## License
[MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)
