How to give pdf.js worker in Angular CLI application

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

I solved this by using the pre-built version pdfjs-dist and including the file pdf.worker.min.js in scripts

    "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"
    ]
  }

then you shoud import the pdfjs-dist

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

Answer 4

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

Answer 5

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

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

Then you need to

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