ng2-pdf-viewer – Angular ~ Believe the Logic

Angular PDF Viewer

Overview

Install

Angular >= 12

1	`npm install ng2-pdf-viewer`

Angular >= 4

1	`npm install ng2-pdf-viewer@^7.0.0`

Angular < 4

1	`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]

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

Pass pdf location

1	`[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

1	`[page]="1"`

supports two way data binding as well

1	`[(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]

Property	Type	Required
[stick-to-page]	boolean	Optional

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

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

[render-text]

Property	Type	Required
[render-text]	boolean	Optional

Enable text rendering, allows to select text

1	`[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

1	`[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

1	`[external-link-target]="'blank'"`

[rotation]

Property	Type	Required
[rotation]	number	Optional

Rotate PDF

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

1	`[rotation]="90"`

[zoom]

Property	Type	Required
[zoom]	number	Optional

Zoom pdf

1	`[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

1	`[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

1	`[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.

1	`[fit-to-page]="false"`

[show-all]

Property	Type	Required
[show-all]	boolean	Optional

Show single or all pages altogether

1	`[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.

1	`[autoresize]="true"`

[c-maps-url]

Property	Type	Required
[c-maps-url]	string	Optional

Url for non-latin characters source maps.

1	`[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

1	`[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:

1	`(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>:

1	`(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>:

1	`(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>:

1	`(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 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
  });
}

import sdk from ‘@stackblitz/sdk’ sdk.embedProjectId( ‘elementOrId’, ‘ng2-pdf-viewer’, { forceEmbedLayout: true, openFile: ‘src/app/app.component.ts’, } );

https://stackblitz.com/edit/ng2-pdf-viewer?embed=1&file=src/app/app.component.ts

React

Friday, March 24, 2023