How to give pdf.js worker in Angular CLI application

问题

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.

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

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

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

回答1:

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 https://www.jsdelivr.com/package/npm/pdfjs-dist?path=build

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

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

Specifications: got with command '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

回答2:

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

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

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

In production you should load it from a CDN URL.

回答3:

The message "Setting up fake worker" means two things:

Your PDF files are rendered just fine. Everything's working as expected.
But the PDF files could be rendered faster. A lot faster.

The pdf.js library consists of two or three parts:

pdf.js is responsible for displaying and managing the PDF file.
pdf.worker.js is responsible for the core job of rendering the PDF pages.
viewer.js is optional; it's part of the default PDF viewer.

If you load both pdf.js and pdf.worker.js by an import or require() statement, the core pdf renderer runs in the main thread. You can do better than that, and that's what the "fake worker" warning is about.

Do not load pdf.worker.js by an import or require() statement. The other answers have plenty of information how to do that. By default, this approach works out-of-the-box, but if your project has a non-standard folder structure, you'll need to set PDFJS.GlobalWorkerOptions.workerSrc.

You'll be rewarded by a core PDF renderer running in a separate thread. More precicely, it runs as a service worker. Most of the time, you won't even notice, but if your PDF file exceed 100 pages or 100 megabytes, service workers make the difference between "too slow to be used" and "fast and smooth".

Let me conclude with some self-advertising: ngx-extended-pdf-viewer is a widget making pdf.js available to Angular without the pain. There are also some nice alternatives, such as ng2-pdf-viewer, ng2-pdfjs-viewer, and several others.

来源：https://stackoverflow.com/questions/49822219/how-to-give-pdf-js-worker-in-angular-cli-application

标签

angular

pdfjs