blocks|key|4322134|text|这是因为您没有设置GlobalWorkerOptions.workerSrc属性。通常将其设置为可从中加载pdf.worker.js或pdf.worker.min.js文件的URL。如果您安装了pdfjs-dist包，则它与pdf.js位于同一文件夹中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4322135|尝试一下，一旦设置了属性，警告就会消失。|4322136|PDFJS.GlobalWorkerOptions.workerSrc+=+
++++++"<your+local+path>./node_modules/pdfjs-dist/build/pdf.worker.js";|code-block|syntax|javascript|4322137|在生产中，您应该从CDN+URL加载它。|4322138|entityMap^0|9|T|1H|D|1V|H|2P|A|34|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

This is because you did not set the <code>GlobalWorkerOptions.workerSrc</code> property. Normally you set it to the URL from where the <code>pdf.worker.js</code> or <code>pdf.worker.min.js</code> file can be loaded. If you installed the <code>pdfjs-dist</code> packages it is in the same folder as <code>pdf.js</code>.

Try it out, as soon as you set the property the warning goes away.

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

In production you should load it from a CDN URL.

blocks|key|4322196|text|经过几天的努力，我解决了这个问题。我第一次使用StackBlitz+online+Angular6服务获胜。但在家里复习有问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4322197|在我的例子中，可以将Angular+6和CLI与本地文件一起使用。PS:当你使用本地安装和带有外部链接的worker时，请注意类似版本的pdf.js和pdf.worker.js+(我使用pdf.worker.min.js)，如CDN等。|4322198|从CDN+https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build获取我需要的版本|offset|length|4322199|将您的pdf.worker.js或pdf.worker.min.js放到/src/assets/，然后使用：|4322200|import+*+as+pdfjsLib+from+'pdfjs-dist/build/pdf
pdfjsLib.GlobalWorkerOptions.workerSrc+=+'./assets/pdf.worker.min.js';|code-block|syntax|javascript|4322201|说明:使用命令'ng+version‘获取|4322202|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|4322203|entityMap|0|LINK|mutability|MUTABLE|url|https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build^0|0|0|5|1M|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

I solved this issue with some days of fighting.
First time I win with StackBlitz online Angular6 service. But had a problem with repeating at home. 

In my case it is possible to use with Angular 6 and CLI with local file.
PS: Care about similar versions of pdf.js and pdf.worker.js (I use pdf.worker.min.js) when you use local installed and worker with external link like CDN and etc.

Got version I need from CDN <a href="https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build" rel="noreferrer">https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build</a>

Put your pdf.worker.js or pdf.worker.min.js to /src/assets/
And then use: 

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

Specifications:
got with command 'ng version'

<pre><code>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
</code></pre>

blocks|key|4322233|text|我通过将pdf.worker.js文件包含在捆绑包中解决了这个问题，方法与存储资产的方式大致相同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4322234|"assets":+[
++++++++++"src/favicon.ico",
++++++++++"src/assets",
++++++++++{
++++++++++++"glob":+"pdf.worker.*",
++++++++++++"input":+"node_modules/pdfjs-dist/build/",
++++++++++++"output":+""
++++++++++}++++++++++++++
++++++++],|code-block|syntax|javascript|4322235|然后你需要|4322236|import+*+as+pdf+from+'pdfjs-dist';
//+...+//
pdf.GlobalWorkerOptions.workerSrc+=+'pdf.worker.js';
const+loadingTask+=+pdf.getDocument({+data:+this.pdfData+});|4322237|entityMap^0|4|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

I solved this by including the <code>pdf.worker.js</code> file in the bundle much the same way as assets are stored.

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

Then you need to 

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

blocks|key|4322259|text|我通过使用预构建版本pdfjs-dist并在脚本中包含文件pdf.worker.min.js解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4322260|++++"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"
++++]
++}|code-block|syntax|javascript|4322261|然后，您应该导入pdfjs-dist|4322262|import+*+as+PDFJS+from+"pdfjs-dist";
PDFJS.GlobalWorkerOptions.workerSrc+=+"pdf.worker.js";|4322263|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I solved this by using the pre-built version pdfjs-dist and including the file pdf.worker.min.js in scripts
<pre><code> &quot;assets&quot;: [
 &quot;src/assets&quot;,
 &quot;src/favicon.ico&quot; 
 ],
 &quot;styles&quot;: [
 &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,
 ],
 &quot;scripts&quot;: [
 &quot;node_modules/bootstrap/dist/js/bootstrap.js&quot;,
 &quot;node_modules/pdfjs-dist/build/pdf.worker.min.js&quot;
 ]
 }
</code></pre>
then you shoud import the pdfjs-dist
<pre><code>import * as PDFJS from &quot;pdfjs-dist&quot;;
PDFJS.GlobalWorkerOptions.workerSrc = &quot;pdf.worker.js&quot;;
</code></pre>

I used pdf.js directly in angular app for some pdf purposes. It works fine.

I imported the pdfjs from the pdfjs-dist and my package.json includes pdfjs-dist.

My pdf is working fine, but in the console, I get the below error.

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

pdf.js:351 Warning: Setting up fake worker.
</code></pre>

How to set up the worker properly in angular CLI application?

How to give pdf.js worker in Angular CLI application

我在angular应用程序中直接使用pdf.js实现了一些pdf目的。它工作得很好。我从pdfjs-dist导入了pdfjs，并且我的package.json包含pdfjs-dist。我的pdf运行良好，但在控制台中，我得到以下错误。pdf.js:9067 GET http://localhost:4300/main....

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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