ng2-pdfjs-viewer

ng2-pdfjs-viewer

Installation

Step 1: To use this library you need a copy of pdfjs

A. Using pdf-js-gh-pages

a. Download pdfjs-gh-pages from here: https://github.com/mozilla/pdf.js/archive/gh-pages.zip and extract it.  
b. Create a `pdfjs` folder under your angular2+ applications `assets` folder  
c. Copy `pdf.js-gh-pages/build` and `pdf.js-gh-pages/web` folders from extracted package to `pdfjs` folder.  
d. The web/ directory contains a 1 MB PDF file called "compressed.tracemonkey-pldi-09.pdf". This file is a sample and can safely  be removed.  
ps: More info can be found here: https://github.com/mozilla/pdf.js/wiki/setup-pdf.js-in-a-website

OR

B. Using modified version of viewerJs (Recommended approach)

a. Download/copy the folder pdfjs from https://github.com/intbot/ng2-pdfjs-viewer/tree/master/pdfjs and put it under your   angular2+ application's `assets` folder.  
b. Now you can use additional settings such as   
 `[pdfJsFolder]`: To set the folder path under `web` and `build` resides.  
 `[externalWindow]`: To decide pdf should be inline or in a new tab  
 `[openFile]`: Show/hide open file icon  
 `[viewBookmark]`: Show/hide bookmark icon  
 `[download]`: Show/hide download icon  
 `[showSpinner]`: Show a simple css based spinner/progress before the pdf loads  

Step 2: To install ng2-pdfjs-viewer, run:

$ npm install ng2-pdfjs-viewer --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import PdfJsViewerComponent component
import { PdfJsViewerComponent } from 'ng2-pdfjs-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Add to imports
    PdfJsViewerComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your PdfJsViewerComponent is imported you can use it in your Angular application like this:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<ng2-pdfjs-viewer pdfSrc="your pdf file path"></ng2-pdfjs-viewer>

Here is a use case to download and open the pdf as byte array and open in new tab/window: Please note, pdfSrc can be a Blob or Uint8Array as well For [externalWindow]="true" to work, pop-ups needs to be enabled at browser level

<!-- your.component.html -->
<button (click)="openPdf();"></button>

<!-- Please note, you need a copy of https://github.com/intbot/ng2-pdfjs-viewer/tree/master/pdfjs for some of the below features to work -->
<ng2-pdfjs-viewer #pdfViewer style="width: 800px; height: 400px"
                  [pdfJsFolder]="pdfjs"
                  [externalWindow]="true"
                  [openFile]="false"
                  [viewBookmark]="false"
                  [download]="false"></ng2-pdfjs-viewer>

<!-- your.component.ts-->
export class RateCardComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer
  ...

  private downloadFile(url: string): any {
    return this.http.get(url, { responseType: ResponseContentType.Blob }).map(
      (res) => {
        return new Blob([res.blob()], { type: "application/pdf" });
      });
  }

  public openPdf() {
    let url = "url to fetch pdf as byte array";

    this.downloadFile(url).subscribe(
      (res) => {
        this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
      }
    );
  }

License

MIT © Code Hippie