Pdf.js: Führen Sie das PDF.js-Canvas-Rendering in einem Webworker aus

Erstellt am 29. Nov. 2018 · 4Kommentare · Quelle: mozilla/pdf.js

Aufbau:

Chrom 71
Betriebssystem und seine Version: Beliebig
PDF.js-Version: 2.0.943
Ist eine Browsererweiterung: nein

Schritte zum Reproduzieren des Problems:

Schreiben Sie einen Webworker wie folgt:

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

Nennen Sie dies mit zB w = new Worker('sample-pdf.js');

Was ist das erwartete Verhalten? (Screenshot hinzufügen)

PDF würde zu OffscreenCanvas

Was schief gelaufen ist? (Screenshot hinzufügen)

ReferenceError: Dokument ist nicht definiert
bei GenericFontLoader.insertRule (pdf.js:10154)
bei GenericFontLoader.bind (pdf.js:10205)
bei WorkerTransport.(pdf.js:9177)
bei LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js:12833)
am LoopbackPort.(pdf.js:8681)
bei Array.forEach ()

dh das schlägt fehl:

styleElement = this.styleElement = document.createElement('style');

Das Problem ist das Fehlen eines DOM. Das Problem kann ein Problem mit der Dokumentation sein, da PDF.js ein Node-Beispiel enthält , oder es können Probleme in der Tiefe lauern. Auf jeden Fall wollte ich es melden, falls es hier offensichtliche Richtlinien gibt.

1-core

Quelle

brianmhunt

👍8

Hilfreichster Kommentar

Wie verwenden Sie pdf.js in einem Web-Worker?

Ich habe es damit importiert.

// 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

Aber wenn Sie getDocument . Es gibt einen Fehler zurück

Nicht abgefangen (versprochen) Fehler: Einrichten des Fake-Workers fehlgeschlagen: "__webpack_require__(...).ensure is not a function"

tandat2209 am 24. Apr. 2020

👍3

Alle 4 Kommentare

Sieht (im Wesentlichen) aus wie ein Duplikat von Ausgabe #10039; höchstwahrscheinlich wäre eine beträchtliche Menge an Refactoring erforderlich, damit OffscreenCanvas standardmäßig unterstützt wird.

Snuffleupagus am 29. Nov. 2018

Vielen Dank. @Snuffleupagus Ich habe dieses Problem gesehen und hätte es verknüpfen sollen. die Probleme sind nicht identisch in dem Sinne, dass:

OffscreenCanvas kann im Hauptthread verwendet werden (dh seine Verwendung ist nicht auf Webworker beschränkt);
Ein Webworker muss OffscreenCanvas nicht verwenden (dh ein anderer Canvas-Polyfill als OffscreenCanvas könnte funktionieren);
Ein funktionierendes OffscreenCanvas ist möglicherweise nicht das einzige Problem, das PDF.js bei Webworkern hat.

Mit anderen Worten, OffscreenCanvas Support ist ein weiteres Problem, das zufällig eine mögliche Alternative zu CanvasElement , aber das allein reicht möglicherweise nicht aus, um dieses Problem zu lösen.

brianmhunt am 29. Nov. 2018

Wenn Sie sich https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js (ein Knotenbeispiel) ansehen, müssen Sie möglicherweise ein canvasFactory , auch. Was passiert, wenn Sie das tun?

jsoo1 am 8. Mai 2019