Pdf.js: Exécuter le rendu de canevas PDF.js dans un web-worker

Créé le 29 nov. 2018 · 4Commentaires · Source: mozilla/pdf.js

Configuration:

Chrome 71
Système d'exploitation et sa version : tout
Version PDF.js : 2.0.943
Est une extension de navigateur : non

Étapes pour reproduire le problème :

Écrivez un travailleur Web comme ceci :

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

Appelez ceci avec par exemple w = new Worker('sample-pdf.js');

Quel est le comportement attendu ? (ajouter une capture d'écran)

Le PDF serait rendu au OffscreenCanvas

Qu'est ce qui ne s'est pas bien passé? (ajouter une capture d'écran)

ReferenceError : le document n'est pas défini
à GenericFontLoader.insertRule (pdf.js:10154)
sur GenericFontLoader.bind (pdf.js:10205)
chez WorkerTransport.(pdf.js:9177)
à LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js:12833)
au LoopbackPort.(pdf.js:8681)
à Array.forEach ()

c'est-à-dire que cela échoue:

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

Le problème est l'absence de DOM. Le problème peut être un problème de documentation, car PDF.js a un exemple de nœud , ou il peut y avoir des problèmes cachés dans les profondeurs. En tout cas, je voulais le signaler au cas où il y aurait des directives évidentes ici.

1-core

Source

brianmhunt

👍8

Commentaire le plus utile

Comment utilisez-vous pdf.js dans un web-worker ?

Je l'ai importé par ceci.

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

Mais lorsque vous utilisez getDocument . Il renvoie une erreur

Erreur non interceptée (en promesse) : la configuration du faux travailleur a échoué : "__webpack_require__(...).ensure n'est pas une fonction"

tandat2209 le 24 avr. 2020

👍3

Tous les 4 commentaires

Ressemble (essentiellement) à un doublon du numéro 10039 ; très probablement, une bonne quantité de refactorisation serait nécessaire pour que OffscreenCanvas soit pris en charge par défaut.

Snuffleupagus le 29 nov. 2018

Merci. @Snuffleupagus J'ai vu ce problème et j'aurais dû le lier; les problèmes ne sont pas identiques en ce sens que :

OffscreenCanvas peut être utilisé dans le thread principal (c'est-à-dire que son utilisation n'est pas limitée aux travailleurs Web) ;
Un travailleur Web n'a pas besoin d'utiliser OffscreenCanvas (c'est-à-dire qu'un polyfill Canvas autre que OffscreenCanvas peut fonctionner);
Un OffscreenCanvas fonctionnel n'est peut-être pas le seul problème que PDF.js rencontre chez les travailleurs Web.

En d'autres termes, le support OffscreenCanvas est un autre problème qui se trouve être une alternative possible à CanvasElement , mais cela seul peut ne pas être suffisant pour résoudre ce problème.

brianmhunt le 29 nov. 2018

En regardant https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js (un exemple de nœud), il semble que vous deviez faire un canvasFactory , trop. Que se passe-t-il si vous faites cela ?

jsoo1 le 8 mai 2019

Comment utilisez-vous pdf.js dans un web-worker ?

Je l'ai importé par ceci.

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

Mais lorsque vous utilisez getDocument . Il renvoie une erreur