Pdf.js: Run PDF.js canvas rendering in a web-worker

Created on 29 Nov 2018 · 4Comments · Source: mozilla/pdf.js

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:

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 })
})

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. (pdf.js:9177)
at LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js:12833)
at LoopbackPort. (pdf.js:8681)
at Array.forEach ()

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.

1-core

Source

brianmhunt

👍8

Most helpful comment

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"

tandat2209 on 24 Apr 2020

👍3

All 4 comments

Looks (essentially) like a duplicate of issue #10039; most likely, a fair amount of re-factoring would be required for OffscreenCanvas to be supported out-of-the-box.

Snuffleupagus on 29 Nov 2018

Thanks. @Snuffleupagus I saw that issue, and should've linked it; the problems are not identical in the sense that:

OffscreenCanvas can be used in the main thread (i.e. its use is not limited to web workers);
A web worker needn't use OffscreenCanvas (i.e. a Canvas polyfill other than OffscreenCanvas might work);
A working OffscreenCanvas might not be the only problem PDF.js has in web workers.

In other words OffscreenCanvas support is another problem that happens to be a possible alternative to CanvasElement, but that alone may not be sufficient to resolve this issue.

brianmhunt on 29 Nov 2018

Looking at https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js (a node example), it looks like you may need to make a canvasFactory, too. What happens if you do that?

jsoo1 on 8 May 2019

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