首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Angular CLI应用程序中提供pdf.js worker

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

Stack Overflow用户
提问于 2018-04-14 01:22:06
回答 4查看 10.4K关注 0票数 4

我在angular应用程序中直接使用pdf.js实现了一些pdf目的。它工作得很好。

我从pdfjs-dist导入了pdfjs,并且我的package.json包含pdfjs-dist。

我的pdf运行良好,但在控制台中,我得到以下错误。

代码语言:javascript
复制
pdf.js:9067 GET http://localhost:4300/main.bundle.worker.js 404 (Not Found)

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

如何在angular CLI应用程序中正确设置worker?

EN

回答 4

Stack Overflow用户

发布于 2018-06-09 08:23:22

经过几天的努力,我解决了这个问题。我第一次使用StackBlitz online Angular6服务获胜。但在家里复习有问题。

在我的例子中,可以将Angular 6和CLI与本地文件一起使用。PS:当你使用本地安装和带有外部链接的worker时,请注意类似版本的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/,然后使用:

代码语言:javascript
复制
import * as pdfjsLib from 'pdfjs-dist/build/pdf
pdfjsLib.GlobalWorkerOptions.workerSrc = './assets/pdf.worker.min.js';

说明:使用命令'ng version‘获取

代码语言:javascript
复制
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
票数 12
EN

Stack Overflow用户

发布于 2020-04-12 11:48:00

我通过将pdf.worker.js文件包含在捆绑包中解决了这个问题,方法与存储资产的方式大致相同。

代码语言:javascript
复制
"assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "pdf.worker.*",
            "input": "node_modules/pdfjs-dist/build/",
            "output": ""
          }              
        ],

然后你需要

代码语言:javascript
复制
import * as pdf from 'pdfjs-dist';
// ... //
pdf.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
const loadingTask = pdf.getDocument({ data: this.pdfData });
票数 8
EN

Stack Overflow用户

发布于 2018-05-02 22:48:06

这是因为您没有设置GlobalWorkerOptions.workerSrc属性。通常将其设置为可从中加载pdf.worker.jspdf.worker.min.js文件的URL。如果您安装了pdfjs-dist包,则它与pdf.js位于同一文件夹中。

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

代码语言:javascript
复制
PDFJS.GlobalWorkerOptions.workerSrc = 
      "<your local path>./node_modules/pdfjs-dist/build/pdf.worker.js";

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

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49822219

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档