使用Angular和pdf.js展示多页PDF

Question

我想在我的Angular应用程序中展示PDF。需要能够同时显示多个页面并在PDF内搜索。 我尝试了angularjs-pdf，但它缺少这些功能。是否有一个适用于pdf.js的Angular封装可以实现这一点？或者是否有人可以帮助我在没有封装的情况下实现pdf.js在我的Angular应用程序中的使用呢？

- user2900970

Answer 1

从ng2-pdf阅读器页面，它建议您需要“pdf.js的angular封装”，Mozilla的阅读器内置了大量功能，例如打印，下载，书签，全屏，打开文件，缩放，搜索......

如果您需要同时显示多个PDF文件，并且不介意使用iFrames，则建议使用ng2-pdfjs-viewer。 https://www.npmjs.com/package/ng2-pdfjs-viewer

- K J

Answer 2

假设有这样一句话：

"我想在我的Angular应用程序中显示PDF文件"

任何搜索此内容的人都应该查看ng2-pdf-viewer，了解更多关于此模块的信息，请访问ng2-pdf-viewer PdfShowcase

基本上，此模块可以在单个屏幕上显示多个PDF文件。

1. app.component.ts

   // 声明pdfs为空数组
   pdfs = [];
   
   // 假设通过MVC样式从服务器请求PDF
   getPdfs(){
     this.getPdfService.getPdfs().subscribe(response => {
       response.body.forEach((value, index) => {
         this.pdfs.push({
           id: index,
           obj: window.URL.createObjectURL(value);
         });
       });     
     });
   }
   

2. 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>
   

如果这个库不适合您的用例，您可以尝试使用其他使用iframe或类似策略的库。 这里有一个有用的来源值得一看。

我知道我对这篇文章有点晚了，但是想在这里发布可能会帮助一些正在寻找同样东西的人。 希望能有所帮助。

- zep_ph