can I use pdf.js with angular2

Question

I have a requirement where user can upload pdf and we have to convert them to images with in the UI. We are using angular2. I have seen pdf.js gives pdf to image feature.But how can i use this with angular 2? Is it possible to integrate both? Can someone help me with this?

Answer 1

Option 1.

Full disclosure, as a result of the discussion on this thread with @BlackEagle (Many thanks to him for the idea), I have created an angular component which wraps pdfjs along with a feature rich viewer. Using it, you can display pdf inline or in a new tab and take advantage of the built in viewer, here it is ng2-pdfjs-viewer

Usage is like this.

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</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"
  [externalWindow]="true"
  [downloadFileName]="'mytestfile.pdf'"
  [openFile]="false"
  [viewBookmark]="false"
  [download]="false">
</ng2-pdfjs-viewer>

<!-- your.component.ts-->
export class SomeComponent 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";
    // url can be local url or remote http request to an api/pdf file. 
    // E.g: let url = "assets/pdf-sample.pdf";
    // E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // E.g: http://localhost:3000/api/GetMyPdf
    // Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html

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

Option 2

The below package will help you integrate pdfjs into your angular applications: ng2-pdf-viewer. It is highly customizable, feature rich and exposes a lot of properties. If you are looking for a bare pdf to be embedded into your html, this is the way to go.

It can be used like this:

 import { Component } from '@angular/core';
 @Component({
  selector: 'example-app',
  template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
}

Installation and configuration instructions can be found here: https://github.com/VadimDez/ng2-pdf-viewer

Answer 2

yes you can use pdf js in angular 2 application as follows

step 1: Install ng2-pdfjs-viewer npm package(https://www.npmjs.com/package/ng2-pdfjs-viewer). Add dependencies in package json file in your angular2 application

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
----------
-------------
"ng2-pdfjs-viewer": "3.2.5",
}

step 2: import and add module in app.module.ts

• import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';

• @NgModule({imports: [PdfJsViewerModule] });

Step 3: now import PdfJsViewerComponent in app.component.ts

• import { PdfJsViewerComponent } from 'ng2-pdfjs-viewer';

and write code for fileupload from UI as follows:

---

-define a variable for pdf src file path

pdfSrc:string='/abc.pdf';

@ViewChild('pdfViewer') pdfViewer:PdfJsViewerComponent;
///this is click method 
onFileSelected() {
    let $img: any = document.querySelector('#file');
    if (typeof (FileReader) !== 'undefined') {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.pdfSrc = e.target.result;
        this.pdfViewer.pdfSrc=new Blob([new Uint8Array(e.target.result)]);
        this.pdfViewer.refresh();
      };
      reader.readAsArrayBuffer($img.files[0]);
    }
  }

step 4: change app.component.html file as follows

<ng2-pdfjs-viewer #pdfViewer [pdfSrc]="pdfSrc"></ng2-pdfjs-viewer>

Note:

1. abc.pdf file should be in application directory.
2. copy pdfJs folder from '.\node_modules\ng2-pdfjs-viewer' path and paste this folder inside 'src/assets' folder.

Hope it's work!!!