10.0.0 • Published 7 months ago

ng2-pdf-viewer v10.0.0

Weekly downloads
74,711
License
MIT
Repository
github
Last release
7 months ago

PDF Viewer Component for Angular 5+

Demo page

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

Stackblitz Example

https://stackblitz.com/edit/ng2-pdf-viewer

Blog post

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

Overview

Install

Angular >= 12

npm install ng2-pdf-viewer

Partial Ivy compilated library bundles.

Angular >= 4

npm install ng2-pdf-viewer@^7.0.0

Angular < 4

npm install ng2-pdf-viewer@~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"
              [original-size]="false"
              style="width: 400px; height: 500px"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

Options

src

PropertyTypeRequired
srcstring, object, UInt8ArrayRequired

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

PropertyTypeRequired
page or (page)numberRequired 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 {
    height: 100vh;
}

stick-to-page

PropertyTypeRequired
stick-to-pagebooleanOptional

Sticks view to the page. Works in combination with [show-all]="true" and page.

[stick-to-page]="true"

render-text

PropertyTypeRequired
render-textbooleanOptional

Enable text rendering, allows to select text

[render-text]="true"

render-text-mode

PropertyTypeRequired
render-text-modeRenderTextModeOptional

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

PropertyTypeRequired
external-link-targetstringOptional

Used in combination with [render-text]="true"

Link target

  • blank
  • none
  • self
  • parent
  • top
[external-link-target]="'blank'"

rotation

PropertyTypeRequired
rotationnumberOptional

Rotate PDF

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

[rotation]="90"

zoom

PropertyTypeRequired
zoomnumberOptional

Zoom pdf

[zoom]="0.5"

zoom-scale

PropertyTypeRequired
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

PropertyTypeRequired
original-sizebooleanOptional
  • 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

PropertyTypeRequired
fit-to-pagebooleanOptional

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

PropertyTypeRequired
show-allbooleanOptional

Show single or all pages altogether

[show-all]="true"

autoresize

PropertyTypeRequired
autoresizebooleanOptional

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

PropertyTypeRequired
c-maps-urlstringOptional

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

PropertyTypeRequired
show-bordersbooleanOptional

Show page borders

[show-borders]="true"

(after-load-complete)

PropertyTypeRequired
(after-load-complete)callbackOptional

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)

PropertyTypeRequired
(page-rendered)callbackOptional

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)

PropertyTypeRequired
(pages-initialized)callbackOptional

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)

PropertyTypeRequired
(text-layer-rendered)callbackOptional

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)

PropertyTypeRequired
(error)callbackOptional

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)

PropertyTypeRequired
(on-progress)callbackOptional

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 cdn.jsdelivr.net.

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.

If you ever have a (super rare) edge case where you run in an environment that multiple components are somehow loaded within the same web page, sharing the same window, but using different versions of pdf.worker, support has been added. You can do the above, except that you can append the specific version of pdfjs required and override the custom path just for that version. This way setting the global window var won't conflict.

(window as any)["pdfWorkerSrc2.14.305"] = '/pdf.worker.js';

Search in the PDF

Use eventBus for the search functionality.

In your component's ts file:

  • Add reference to pdf-viewer component,
  • then when needed execute search() linke this:
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;

search(stringToSearch: string) {
  this.pdfComponent.eventBus.dispatch('find', {
    query: stringToSearch, type: 'again', caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true
  });
}

Contribute

See CONTRIBUTING.md

Donation

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

paypal

License

MIT © Vadym Yatsyuk

10.0.0

7 months ago

9.1.5

12 months ago

9.1.4

1 year ago

9.1.3

1 year ago

9.1.2

2 years ago

9.1.1

2 years ago

9.1.0

2 years ago

9.0.0

2 years ago

8.0.1

2 years ago

8.0.0

2 years ago

7.0.2

2 years ago

7.0.0

3 years ago

7.0.1

3 years ago

6.4.1

3 years ago

6.4.0

3 years ago

6.3.2

4 years ago

6.3.1

4 years ago

6.3.0

4 years ago

6.2.0

4 years ago

6.1.3

4 years ago

6.1.2

4 years ago

6.1.1

4 years ago

6.1.0

4 years ago

6.0.2

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.3.4

5 years ago

5.3.3

5 years ago

5.3.2

5 years ago

5.3.1

5 years ago

5.3.0

5 years ago

5.2.4

5 years ago

5.2.3

5 years ago

5.2.2

5 years ago

5.2.1

5 years ago

5.2.0

5 years ago

5.1.3

5 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.1.2

6 years ago

4.1.1

6 years ago

4.1.0

6 years ago

4.0.0

6 years ago

3.0.8

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.5

7 years ago

1.1.4

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.8-alpha.1

8 years ago

0.0.8-rc.4

8 years ago

0.0.12

8 years ago

0.0.11

8 years ago

0.0.10

8 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago