我如何使用 pdfjs-dist 和 Angular 修复此错误消息？

Question

收到此错误消息后，我在项目 Angular 中安装 pdfjs-lib 以将 PDF 转换为画布：

Error: ./node_modules/pdfjs-dist/build/pdf.js 2094:26
Module parse failed: Unexpected token (2094:26)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|   async destroy() {
|     this.destroyed = true;
>     await this._transport?.destroy();
|     this._transport = null;
| 

目标是在 HTML 中渲染之前将 PDF 页面转换为画布：

import * as pdfjslib from 'pdfjs-dist';
pdfjslib.getDocument(url).promise.then(async(pdf) => {
        pdf.getPage(1).then(async (page) => {
          let viewport = page.getViewport({ scale: 0.3 });
          let canvas =<HTMLCanvasElement> document.getElementById("card"+pageId);
          let context =<CanvasRenderingContext2D> canvas.getContext("2d");
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          await page.render({
            canvasContext: context,
            viewport: viewport
          });
          resolve("ok");
        }).catch((err) => {
          reject("Erreur sur le pdf!!");
        });
      }).catch((err) => {
        reject("Erreur sur le pdf!!");
       });

Answer 1

您的构建配置不支持选项链。

您应该尝试使用旧文件夹，如下所示：

Answer 2

我不确定你是否仍然遇到这个问题，但降级到较低版本对我有用，或者因为你正在使用 Angular，只需使用另一个库，如 ngx-extended-pdf-viewer，它提供了强大的 API 和 utils处理 PDF 文件。