Negligible Psychological Misery
    Have ideas to improve npm?Join in the discussion! »

    ng2-pdf-viewer
    TypeScript icon, indicating that this package has built-in type declarations

    6.4.1 • Public • Published

    Angular 5+ PDF Viewer

    downloads npm version Gitter PayPal donate button

    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

    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]

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

    Pass pdf location

    [src]="'https://vadimdez.github.io/ng2-pdf-viewer/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/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 :)

    paypal

    License

    MIT © Vadym Yatsyuk

    Install

    npm i ng2-pdf-viewer

    DownloadsWeekly Downloads

    80,913

    Version

    6.4.1

    License

    MIT

    Unpacked Size

    630 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar