How do I use pdfjs in a web worker

[heyux1n]

Attach (recommended) or Link to PDF file here:

Configuration:

• Web browser and its version: Chrome Version 119.0.6045.124 (Official version) (64-bit)
• Operating system and its version: win11
• PDF.js version: v3.11.174
• Is a browser extension: No
• Using a service started by node, the pdf file is stored in public. Use the pdfjs dependency under the local lib

Steps to reproduce the problem:

1. main Thread Trigger rendering

// main.js
const worker = new Worker('./pdfjs-worker.js');
worker.postMessage(url);

worker.onmessage = (event) => {
    const imageBitmap = event.data;
    ctx.drawImage(imageBitmap, 0, 0);
};

2.worker.js Render multiple pages in the worker

// worker.js
importScripts('../../lib/build/pdf.js')

self.onmessage = async event => {
  const pdfUrl = event.data
  const loadingTask = pdfjsLib.getDocument(pdfUrl)
  const pdf = await loadingTask.promise

  const pageNumber = 1 
  const page = await pdf.getPage(pageNumber)

  const scale = 1.0
  const viewport = page.getViewport({ scale })

  const canvas = new OffscreenCanvas(viewport.width, viewport.height)
  const context = canvas.getContext('2d')

  const renderContext = {
    canvasContext: context,
    viewport: viewport,
  }

  //Actually need to render multiple pages
  await page.render(renderContext).promise

  const imageBitmap = await createImageBitmap(canvas)
  self.postMessage(imageBitmap, [imageBitmap])
}

What is the expected behavior? (add screenshot)
After rendering multiple pages in the web worker, the imageBitmap needs to be returned to the main thread. imageBitmap is then used in the main thread

What went wrong? (add screenshot)
This url is the address of the http pdf file that is accessible in the same domain
But an error was reported

api.js:529  Uncaught (in promise) Error: Invalid PDF url data: either string or URL-object is expected in the url property.
    at getUrlProp (api.js:529:9)
    at Object.getDocument (api.js:255:25)
    at self.onmessage (pdfjs-worker.js:6:32)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[heyux1n]

Is not supported by version 3? 😒
_setupFakeWorkerGlobal uses document, But the worker cannot use the document directly

_setupFakeWorkerGlobal

loadScript

[heyux1n]

So, How do I disable the pdfjs worker?

[yeargun]

so how did you figure it this issue afterall :/ I'm having the same issue, trying to make it work at version 3.11. ..

[heyux1n]

I used version 4.0.269

set GlobalWorkerOptions.workerSrc

// Will not create worker
GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.mjs');

Convert the file url to arrayBuffer, and give to the pdfjs

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

[yeargun]

thanks for the reply

[Evanston09]

The only solution I found was to create a URL object from the URL string. I’m not sure why this works, but it does. And when using the URL object, pdf.js creates a fake worker instead of starting a new worker inside the existing one. I don't know why this happens either—someone else might be able to explain.

[yeargun]

yo check out unpdf @ npm. i havent used it yet but I will use that in future

[Evanston09]

Just for closure because I need to get some lol. When pdf.js instantiates the worker, it does some stuff to move things around if it's running from a CDN. Specifically, this part: !PDFWorker._isSameOrigin(window.location.href, workerSrc) tries to call window, which isn’t defined inside an existing worker. This causes an error and ends up creating a fake worker instead.