使用 [Angular] 和 PDF.JS 来显示 PDF 的简单示例程序

2 年 ago
清, 扬
1 minute

2021年6月27日更新：我逐渐地更新了。链接：https://github.com/sengokyu/ex.angular-pdfjs

这是什么？

这是一个在 Angular 组件中显示 PDF 文件第一页的示例。我们使用了 PDF.JS。

环境

    • Angular 12.0.0 RC2

 

    pdfjs-dist 2.7.570

因为PDF.JS使用了，所以为了加载它，我选择了Angular 12。

安装

npm i pdfjs-dist --save-dev

编辑angular.json文件

为了单独加载pdf.js文件，你需要编辑angular.json文件。

"scripts": [
   "node_modules/pdfjs-dist/build/pdf.js",
   "node_modules/pdfjs-dist/build/pdf.worker.js"
],

编程

表达处理部分

显示PDF的处理与Angular无关，是从PDF.JS的示例中获取的。

  async showPdfPage(
    canvas: HTMLCanvasElement,
    url: string,
    scale: number,
    pageNumber: number
  ): Promise<void> {
    const pdf = await getDocument(url).promise;
    const page = await pdf.getPage(pageNumber);
    const viewport = page.getViewport({ scale });
    const canvasContext = canvas.getContext('2d');

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

    await page.render({ canvasContext, viewport }).promise;
  }

组件模板

模板只需放置canvas元素，并为其分配ID以供引用。

<canvas #pdfCanvas></canvas>

组件

我正在使用@ViewChild引用放在模板中的canvas。

export class AppComponent implements AfterViewInit {
  @ViewChild('pdfCanvas')
  pdfCanvas: { nativeElement: HTMLCanvasElement };
}

在这里，我在AfterViewInit中调用了先前编写的显示处理。

  async ngAfterViewInit(): Promise<void> {
    showPdfPage(this.pdfCanvas.nativeElement, PDF_FILE_NAME, 1, 1);
  }

完成

我可以做到这个。
我正在显示此文件 https://raw.githubusercontent.com/sengokyu/ex.angular-pdfjs/main/src/assets/RoShinoStdAdobeFonts.pdf。

image.png

整个程序已经放在GitHub上。
https://github.com/sengokyu/ex.angular-pdfjs

已知问题 (Yǐ zhī

浏览器控制台出现了这样的警告。该怎么办？

警告：字体加载时出错：必须指定CMap的“baseUrl”参数，请确保提供了“cMapUrl”和“cMapPacked” API参数。pdf.js:1211

链接

    TypeScriptでpdfjsを使ってPDFの先頭ページを表示しようと試行錯誤した話
bannerAds