Angular 7 PDFJS 组件

Question

我正在尝试将 PDFJS 封装在 Angular 7 组件中。我有以下代码，但 PDFJS 未定义。我正在使用 Angular/CLI 构建应用程序。

import { Component, OnInit, ElementRef, ViewChild, Input } from '@angular/core';
declare let PDFJS: any;

@Component({
  selector: 'app-dsgpdf',
  templateUrl: './dsgpdf.component.html',
  styleUrls: ['./dsgpdf.component.scss']
})
export class DsgpdfComponent implements OnInit {
    @ViewChild('theCanvas', { read: ElementRef }) theCanvas;


    constructor() {


    }

    ngOnInit() {
        debugger;
        //
        // If absolute URL from the remote server is provided, configure the CORS
        // header on that server.
        //
        var url = '/assets/fdcc0545-a0d7-4c30-89ef-5a908a1e2a47.pdf';
        //
        // The workerSrc property shall be specified.
        //

        let pdfWorkerSrc: string = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



        PDFJS.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
        //
        // Asynchronous download PDF
        //
        var loadingTask = PDFJS.getDocument(url);
        loadingTask.then(pdf => {
            //
            // Fetch the first page
            //
            pdf.getPage(2).then(page => {
                var scale = 1.5;
                var viewport = page.getViewport(scale);
                //
                // Prepare canvas using PDF page dimensions
                //
                var canvas = this.theCanvas.nativeElement;
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                //
                // Render PDF page into canvas context
                //
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport,
                };
                page.render(renderContext).then(() => {
                    debugger;
                });
            });
        });
  }

}

我也试过添加这行代码：

let PDFJS: any = require('pdfjs-dist/build/pdf');

但是，编译失败：

 error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

我显然错误地导入了这个。有人可以指出我正确的方向。

第二个问题：我不想从 cdn 加载工作程序。使用 Angular/CLI 时，正确的做法是什么？

Answer 1

PDFJS 没有目标角度组件。配置需要额外的步骤，而且不是很直接。如果你愿意带一个额外的 angular npm 包，这里有几个开源社区创建的包作为替代品。

以下包将帮助您将 pdfjs 集成到您的 Angular 7 中。它确实提供了基本功能，但不提供查看器。高度可配置：ng2-pdf-viewer。

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

另外，还有另一个包 - ng2-pdfjs-viewer 也提供了一个查看器 - 完全公开，它是由我创建的。

用法是这样的。

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>

<ng2-pdfjs-viewer #pdfViewer style="width: 800px; height: 400px"
  [pdfJsFolder]="'pdfjs'"
  [externalWindow]="true"
  [downloadFileName]="'mytestfile.pdf'"
  [download]="false">
</ng2-pdfjs-viewer>

<!-- your.component.ts-->
export class RateCardComponent 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
      }
    );
  }

Answer 2

为了在您的 Angular 项目中包含 pdfjs，在使用类似 npm i pdfjs-dist 的方式安装软件包后，您需要修改您的 angular.json 文件，将所有文件路径放在 scripts 部分。

为了避免角度抱怨找不到 PDFjs（如果这是对象名称），您需要在要使用它的组件中添加类似 declare var PDFjs 的内容

Answer 3

我认为您必须下载 pdf.js 脚本并将其添加到资产文件夹中的某个位置。然后，在 Angular.json 的脚本数组中执行以下操作： "scripts": ["src/assets/js/pdf.js"]