Angular2+ PDF Viewer

> PDF Viewer Component for Angular 2+

$3

https://vadimdez.github.io/ng2-pdf-viewer/

$3

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

Install

``
npm install ng2-pdf-viewer --save
`

Usage

In case you're using `systemjs` see configuration here.

Add `PdfViewerModule` to your module's `imports`

`js
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

`js
import { Component } from '@angular/core';

@Component({
selector: 'example-app',
template:

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

`js
{
url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',
withCredentials: true
}
`

See more attributes here.


#### [page]
_number_

Page number

`
[page]="1"
`
supports two way data binding as well
`
[(page)]="pageVariable"
`

#### [stick-to-page]
_boolean_

Works in combination with page and sticks view to the page

`
[stick-to-page]="true"
`

#### [render-text]
_boolean_

Enable text rendering, allows to select text
`
[render-text]="true"
`

#### [external-link-target]
_string_

Link target
* blank
* none
* self
* parent
* top
`
[external-link-target]="'blank'"
`

#### [rotation]
_number_

Rotate PDF

Allowed step is 90 degree, ex. 0, 90, 180
`
[rotation]="90"
`

#### [zoom]
_number_

Zoom pdf
`
[zoom]="0.5"
`

#### [original-size]
_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"
`

#### [fit-to-page]
_boolean_

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"
`

#### [show-all]
_boolean_

Show single or all pages altogether

`
[show-all]="true"
`

#### [autoresize]
_boolean_

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 dipslay are set.

`
[autoresize]="true"
`

#### (after-load-complete)

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)

Error handling callback

Define callback in your component's class

`ts
onError(error: any) {
// do anything
}
`

Then add it to pdf-component in component's template

`html
(error)="onError($event)"
`

#### (on-progress)

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

`ts
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)"
`

Contribute

Clone the project

`
npm start
`
and then open
`
http://localhost:8000/
``

License

MIT © Vadym Yatsyuk