我可以将 pdf.js 与 angular2 一起使用吗

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。它是高度可定制的、功能丰富的并公开了许多属性。如果您正在寻找要嵌入到您的 html 中的裸 pdf，这就是您要走的路。

可以这样使用：

 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

Answer 2

是的，您可以在 Angular 2 应用程序中使用 pdf js，如下所示

第一步：安装 ng2-pdfjs-viewer npm 包(https://www.npmjs.com/package/ng2-pdfjs-viewer)。在 angular2 应用程序中的 package json 文件中添加依赖项

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

第二步：在 app.module.ts 中导入和添加模块

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

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

第 3 步：现在在 app.component.ts 中导入 PdfJsViewerComponent

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

并编写从 UI 上传文件的代码，如下所示：

---

-为pdf src文件路径定义一个变量

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

第四步：修改app.component.html文件如下

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

注意：

1. abc.pdf 文件应该在应用程序目录中。
2. 从 '.\node_modules\ng2-pdfjs-viewer' 路径复制 pdfJs 文件夹和 将此文件夹粘贴到“src/assets”文件夹中。

希望成功！！！