Show multiple pages of PDF with Angular and pdf.js

Question

I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF. I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?

score 0 · Answer 1 · answered Jun 26 '22 at 19:45

Assuming this statement:

"I want to show PDFs in my angular application"

Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase

Basically, this module could somewhat allow one to display more than one PDF in a single screen.

app.component.ts

// Declare the pdf as an empty array
pdfs = [];

// Assuming requesting PDFs from server through MVC style
getPdfs(){
  this.getPdfService.getPdfs().subscribe(response => {
    response.body.forEach((value, index) => {
      this.pdfs.push({
        id: index,
        obj: window.URL.createObjectURL(value);
      });
    });     
  });
}

app.component.html

<div *ngFor="let pdf of pdfs, index as i;">
  <div *ngIf="pdf[i]">
    <pdf-viewer
     [rotation]="0"
     [original-size]="true"
     [show-all]="true"
     [fit-to-page]="true"
     [zoom]="0"
     [zoom-scale]="'page-width'"
     [stick-to-page]="true"
     [render-text]="false"
     [external-link-target]="'blank'"
     [autoresize]="true"
     [show-borders]="true"
     [src]="pdf.obj"
     (after-load-complete)="onPdfComplete($event)"
     (error)="onPdfError($event)"
     style="width: 100%; height: 800px;">
    </pdf-viewer>
  </div>
</div>

If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.

I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.

score 0 · Answer 2 · answered Jun 27 '22 at 23:57

From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......

If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer

Show multiple pages of PDF with Angular and pdf.js

2 Answers2