Question

我在角度应用程序中直接使用pdf.js进行某些pdf目的。它工作正常。

我从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

我在几天的战斗中解决了这个问题。我第一次使用StackBlitz在线Angular6服务获胜。但在家里重复有问题。

在我的情况下，可以将Angular 6和CLI与本地文件一起使用。 PS：关注类似版本的pdf.js和pdf.worker.js（我使用pdf.worker.min.js），当你使用本地安装和工人与CDN等外部链接时。

从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';

规格：得到了命令＆＃39; ng版本＆＃39;

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 2

我通过将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 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网址加载它。

Answer 4

我通过使用预构建版本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";

Answer 5

“设置伪造工人”消息的含义有两点：

您的PDF文件呈现得很好。一切都按预期进行。
但是PDF文件可以更快地呈现。快很多。

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

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

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

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

在单独的线程中运行的核心PDF渲染器将给您带来回报。更确切地说，它作为服务工作者运行。在大多数情况下，您甚至不会注意到，但是，如果您的PDF文件超过100页或100兆字节，则服务人员会在“使用太慢”和“快速而流畅”之间做出区分。

让我以一些自我广告作为结尾：ngx-extended-pdf-viewer是一个使Angular可以轻松使用pdf.js的小部件。还有一些不错的替代方法，例如ng2-pdf-viewer，ng2-pdfjs-viewer以及其他几种。

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

5 个答案: