我可以在angular2中使用pdf.js吗

Question

我有一个要求用户可以上传pdf的要求，我们必须在UI中将其转换为图像。我们正在使用angular2。我已经看到pdf.js提供了pdf到图像的功能，但是我该如何在angular 2中使用呢？是否可以将两者整合？有人可以帮我弄这个吗？

Answer 1

选项1。

通过与@BlackEagle对该线程的讨论（完全感谢他的想法）进行了全面披露，我创建了一个角度组件，该组件将pdfjs与功能丰富的查看器包装在一起。使用它，您可以内联显示pdf或在新选项卡中显示并利用内置查看器，这里是ng2-pdfjs-viewer

用法是这样的。

<!-- 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
      }
    );
  }

选项2

以下软件包将帮助您将pdfjs集成到您的angular应用程序中：ng2-pdf-viewer。它是高度可定制的，功能丰富，并且具有很多特性。如果您正在寻找将pdf嵌入到html中的方法，这就是方法。

可以这样使用：

 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';
}

可以在这里找到安装和配置说明：https : //github.com/VadimDez/ng2-pdf-viewer