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

Question

我想在我的角度应用程序中显示PDF.应该可以一次显示多个页面并在PDF内部进行搜索.我试过angularjs-pdf这样做,但它缺乏这些功能.是否有pdf.js的角度包装可以做到这一点？或者有人能让我了解如何在没有包装器的角度应用程序中实现pdf.js？

Answer 1

假设这个声明：

“我想在我的 Angular 应用程序中显示 PDF ”

任何搜索此内容的人都应该查看 ng2-pdf-viewer，有关此模块的更多信息，可以查看ng2-pdf-viewer PdfShowcase

基本上，这个模块可以在某种程度上允许人们在一个屏幕上显示多个 PDF。

1. 应用程序组件.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);
         });
       });     
     });
   }
   

2. 应用程序组件.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 或类似策略的库。请参阅此处是值得查看的有用来源。

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