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加载worker。在使用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部分。

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

Answer 3

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