如何在Angular CLI应用程序中给pdf.js worker

Question

我出于某些pdf目的直接在Angular应用中使用了pdf.js。工作正常。

我从pdfjs-dist导入了pdfjs，而我的package.json包含了pdfjs-dist。

我的pdf工作正常，但是在控制台中，出现以下错误。

pdf.js:9067 GET http://localhost:4300/main.bundle.worker.js 404 (Not Found)

pdf.js:351 Warning: Setting up fake worker.

如何在角度CLI应用程序中正确设置worker？

Answer 1

我通过将pdf.worker.js文件包含在包中解决了这个问题，这与存储资产的方式非常相似。

"assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "pdf.worker.*",
            "input": "node_modules/pdfjs-dist/build/",
            "output": ""
          }              
        ],

那么你需要

import * as pdf from 'pdfjs-dist';
// ... //
pdf.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
const loadingTask = pdf.getDocument({ data: this.pdfData });

Answer 2

经过几天的战斗，我解决了这个问题。我第一次赢得StackBlitz在线Angular6服务。但是在家里重复有一个问题。

就我而言，可以将Angular 6和CLI与本地文件一起使用。PS：当您使用本地安装的和带有外部链接（例如CDN等）的worker时，请关心pdf.js和pdf.worker.js（我使用pdf.worker.min.js）的相似版本。

从CDN获得我需要的版本https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build

将您的pdf.worker.js或pdf.worker.min.js放入/ src / assets /，然后使用：

import * as pdfjsLib from 'pdfjs-dist/build/pdf
pdfjsLib.GlobalWorkerOptions.workerSrc = './assets/pdf.worker.min.js';

规格：附带命令“ ng version”

Angular CLI: 6.0.3
Node: 8.10.0
OS: linux x64
Angular: 6.0.2

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Answer 3

这是因为您没有设置该GlobalWorkerOptions.workerSrc属性。通常，您将其设置为可以加载pdf.worker.js或pdf.worker.min.js文件的 URL 。如果您安装了pdfjs-dist软件包，它与pdf.js.

尝试一下，一旦您设置了属性，警告就会消失。

PDFJS.GlobalWorkerOptions.workerSrc = 
      "<your local path>./node_modules/pdfjs-dist/build/pdf.worker.js";

在生产中，您应该从 CDN URL 加载它。

Answer 4

“设置假工人”消息意味着两件事：

• 您的 PDF 文件渲染得很好。一切都按预期进行。
• 但 PDF 文件的渲染速度可以更快。快得多。

pdf.js 库由两部分或三部分组成：

• pdf.js 负责显示和管理 PDF 文件。
• pdf.worker.js 负责渲染 PDF 页面的核心工作。
• viewer.js 是可选的；它是默认 PDF 查看器的一部分。

import如果通过or语句加载 pdf.js 和 pdf.worker.js require()，核心 pdf 渲染器将在主线程中运行。你可以做得更好，这就是“假工人”警告的含义。

不要pdf.worker.js通过importorrequire()语句加载。其他答案有大量信息如何做到这一点。默认情况下，此方法开箱即用，但如果您的项目具有非标准文件夹结构，则需要将PDFJS.GlobalWorkerOptions.workerSrc.

您将获得在单独线程中运行的核心 PDF 渲染器的奖励。更准确地说，它作为服务工作者运行。大多数时候，您甚至不会注意到，但如果您的 PDF 文件超过 100 页或 100 MB，Service Worker 就会区分“使用速度太慢”和“快速流畅”。

让我以一些自我广告作为结束：ngx-extended-pdf-viewer 是一个小部件，使 pdf.js 可以轻松地供 Angular 使用。还有一些不错的替代品，例如 ng2-pdf-viewer、ng2-pdfjs-viewer 等。

Answer 5

我通过使用预构建版本 pdfjs-dist 并在脚本中包含文件 pdf.worker.min.js 解决了这个问题

    "assets": [
      "src/assets",
      "src/favicon.ico"  
    ],
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
    ],
    "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "node_modules/pdfjs-dist/build/pdf.worker.min.js"
    ]
  }

那么你应该导入 pdfjs-dist

import * as PDFJS from "pdfjs-dist";
PDFJS.GlobalWorkerOptions.workerSrc = "pdf.worker.js";