如何在 Angular 2/4/5 中使用 PDF.js？

Question

我正在尝试使用 Mozilla 的 PDF.js (example here)开发 PDfViewer 应用程序。如果有github项目作为参考就好了。

提前致谢！！

Answer 1

PDF.js 在 Angualr 10 中进行打字

ng2-pdf-viewer是一个很好的解决方案。我需要直接使用PDF.js来满足在服务中生成缩略图的要求，而不需要创建组件。

从 Angular 10 开始，这是有效的：

• npm i pdfjs-dist
• npm i @types/pdfjs-dist

导入和使用。请注意GlobalWorkerOptions.workerSrc = pdfWorkerSrc;：

import { getDocument, GlobalWorkerOptions, PDFDocumentProxy, PDFRenderParams, version, ViewportParameters } from 'pdfjs-dist';

export class MyPdfService {
  private document: Document;

  constructor(@Inject(DOCUMENT) document) {
    this.document = document;
    const pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.js`;
    GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
  }

  // My use case demonstrating strongly typed usage.
  public async pdfToImageDataURLAsync(pdfFile: File): Promise<string> {
    const arrayBuffer = await new Response(pdfFile).arrayBuffer();
    const canvas = this.document.createElement('canvas'),
      ctx = canvas.getContext('2d') as CanvasRenderingContext2D,
      data = arrayBuffer;

    const pdf: PDFDocumentProxy = await getDocument(data).promise;
    const page = await pdf.getPage(1);

    const viewPortParams: ViewportParameters = { scale: 2 };
    const viewport = page.getViewport(viewPortParams);

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext: PDFRenderParams = {
      canvasContext: ctx,
      viewport: viewport
    };

    const renderedPage = await page.render(renderContext).promise;
    const res = canvas.toDataURL();
    if (pdf != null) pdf.destroy();
    return res;
  }
}

Answer 2

如果不是必须使用 Mozilla 的 PDF.js，那么您可以使用在后台使用 PDF.js 的 ng2-pdf-viewer npm 模块。您可以通过以下步骤开始

安装

npm install ng2-pdf-viewer --save

注意：对于 angular 4 或更低版本，请使用 3.0.8 版

然后，在 app.module.js 中导入模块

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

然后在你的组件中使用它

@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;">
  </pdf-viewer>
})

有关更多详细信息，请参阅下面的 git URL 和演示 URL。

https://github.com/VadimDez/ng2-pdf-viewer

https://vadimdez.github.io/ng2-pdf-viewer/

希望这对你有帮助。