Run PDF.js canvas rendering in a web-worker

Configuration:

• Chrome 71
• Operating system and its version: any
• PDF.js version: 2.0.943
• Is a browser extension: no

Steps to reproduce the problem:

1. Write a web worker like this:

function onmessage () {
  const pdfDocument = await pdfjs.getDocument('/some-hard-coded.pdf')
  const page = await pdfDocument.getPage(1)
  const viewport = pdfPage.getViewport(1)
  const width = 250
  const height = viewport.height * (width / viewport.width)
  const canvas = new OffscreenCanvas(width, height)
  const canvasContext = canvas.getContext('2d', { alpha: false })
  return page.render({ canvasContext, viewport })
})

1. Call this with e.g. w = new Worker('sample-pdf.js');

What is the expected behavior? (add screenshot)

PDF would render to the OffscreenCanvas

What went wrong? (add screenshot)

ReferenceError: document is not defined at GenericFontLoader.insertRule (pdf.js:10154) at GenericFontLoader.bind (pdf.js:10205) at WorkerTransport.<anonymous> (pdf.js:9177) at LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js:12833) at LoopbackPort.<anonymous> (pdf.js:8681) at Array.forEach (<anonymous>)

i.e. this is failing:

styleElement = this.styleElement = document.createElement(‘style’);

The problem is the absence of a DOM. The issue might be one of documentation, as PDF.js has a Node example, or there may be issues lurking in the deep. In any case I wanted to report it in case there were some obvious guidelines here.

[tandat2209]

How do you use pdf.js inside a web-worker?

I imported it by this.

// Worker.ts
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

pdfjs.getDocument(...) => errors

But when using getDocument. It returns an error

Uncaught (in promise) Error: Setting up fake worker failed: “webpack_require(…).ensure is not a function”

[GeoffreyChen777]

I finally figured out how to use the OffscreenCanvas in a web worker to render the PDF.

In the worker script, we need to use workerPort to set the GlobalWorkerOptions.

const pdfjs = require('pdfjs-dist');
const worker = new Worker('pdf.worker.js');
pdfjs.GlobalWorkerOptions.workerPort = worker;

we also need to provide a fake ownerDocument, If we don’t do that, the PDF can still be rendered, but fonts and figures is incorrect:

    const document = {
      fonts: self.fonts,
      createElement: (name) => {
        if (name == 'canvas') {
          return new OffscreenCanvas(1, 1);
        }
        return null;
      },
    };

    const pdf = await pdfjs.getDocument({
      url, // @ts-ignore
      ownerDocument: document,
    }).promise;

It works good in my project. But I’m not sure if this will cause any potential problems.