Angular 5+ PDF Viewer

PDF Viewer Component for Angular 5+

Overview

Install

npm install ng2-pdf-viewer --save

Note: For angular 4 or less use version 3.0.8

Usage

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";
}

Options

[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)

[src]

Property	Type	Required
[src]	string, object, UInt8Array	Required

Pass pdf location

[src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/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/assets/pdf-test.pdf',
 withCredentials: true
}

[page]

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 height of the container, for example:

pdf-viewer {
    display: block;
    height: 100vh;
}

[stick-to-page]

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"

[render-text]

Property	Type	Required
[render-text]	boolean	Optional

Enable text rendering, allows to select text

[render-text]="true"

[render-text-mode]

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"

[external-link-target]

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

[rotation]

Property	Type	Required
[rotation]	number	Optional

Rotate PDF

Allowed step is 90 degree, ex. 0, 90, 180

[rotation]="90"

[zoom]

Property	Type	Required
[zoom]	number	Optional

Zoom pdf

[zoom]="0.5"

[zoom-scale]

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

[original-size]

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"

[fit-to-page]

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"

[show-all]

Property	Type	Required
[show-all]	boolean	Optional

Show single or all pages altogether

[show-all]="true"

[autoresize]

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"

[c-maps-url]

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/pdfjs-dist@2.0.550/cmaps/

To serve cmaps on your own you need to copy node_modules/pdfjs-dist/cmaps to assets/cmaps.

[show-borders]

Property	Type	Required
[show-borders]	boolean	Optional

Show page borders

[show-borders]="true"

(after-load-complete)

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

(page-rendered)

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

(pages-initialized)

Property	Type	Required
(pages-initialized)	callback	Optional

Get event when the pages are initialized.

Define callback in your component:

pageInitialized(e: CustomEvent) {
  console.log('(pages-initialized)', e);
}

And then bind it to <pdf-viewer>:

(pages-initialized)="pageInitialized($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:

textLayerRendered(e: CustomEvent) {
  console.log('(text-layer-rendered)', e);
}

And then bind it to <pdf-viewer>:

(text-layer-rendered)="textLayerRendered($event)"

(error)

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

(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

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

Render local PDF file

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]);
  }
}

Set custom path to the worker

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.

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()

@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

Donation

If this project help you reduce time to develop, you can give me a cup of tea :)

Name		Name	Last commit message	Last commit date
Latest commit History 887 Commits
.github		.github
docs		docs
e2e		e2e
src		src
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
ISSUE_TEMPLATE.md		ISSUE_TEMPLATE.md
LICENSE.md		LICENSE.md
README.md		README.md
SYSTEMJS.md		SYSTEMJS.md
angular.json		angular.json
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
public_api.ts		public_api.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json
tslint.json		tslint.json

License

LAlves91/ng2-pdf-viewer

Folders and files

Latest commit

History

Repository files navigation

Angular 5+ PDF Viewer

Demo page

Stackblitz Example

Blog post

Overview

Install

Usage

Options

[src]

[page]

[stick-to-page]

[render-text]

[render-text-mode]

[external-link-target]

[rotation]

[zoom]

[zoom-scale]

[original-size]

[fit-to-page]

[show-all]

[autoresize]

[c-maps-url]

[show-borders]

(after-load-complete)

(page-rendered)

(pages-initialized)

(text-layer-rendered)

(error)

(on-progress)

Render local PDF file

Set custom path to the worker

Search in the PDF

Contribute

Donation

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages