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

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.