ng2-pdfjs-viewer

ng2-pdfjs-viewer

Installation

To use this library.

1. Clone/Copy pdfjs-gh-pages Using git:

git clone -b gh-pages https://github.com/mozilla/pdf.js.git pdfjs-gh-pages

Or simply download 2. To install this library, 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>

<ng2-pdfjs-viewer #pdfViewer style="width: 800px; height: 400px"
                  [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 © Code1