Pdf.js: Ejecute el renderizado de lienzo PDF.js en un trabajador web

Creado en 29 nov. 2018  ·  4Comentarios  ·  Fuente: mozilla/pdf.js

Configuración:

  • Cromo 71
  • Sistema operativo y su versión: cualquiera
  • Versión PDF.js: 2.0.943
  • Es una extensión de navegador: no

Pasos para reproducir el problema:

  1. Escribe un trabajador web como este:
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. Llame a esto con, por ejemplo, w = new Worker('sample-pdf.js');

¿Cuál es el comportamiento esperado? (agregar captura de pantalla)

El PDF se representaría en OffscreenCanvas

¿Qué salió mal? (agregar captura de pantalla)

ReferenceError: el documento no está definido
en GenericFontLoader.insertRule (pdf.js: 10154)
en GenericFontLoader.bind (pdf.js: 10205)
en WorkerTransport.(pdf.js: 9177)
en LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js: 12833)
en LoopbackPort.(pdf.js: 8681)
en Array.forEach ()

es decir, esto está fallando:

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

El problema es la ausencia de DOM. El problema puede ser de documentación, ya que PDF.js tiene un ejemplo de Node , o puede haber problemas acechando en las profundidades. En cualquier caso, quería informarlo en caso de que hubiera algunas pautas obvias aquí.

1-core

Comentario más útil

¿Cómo se usa pdf.js dentro de un trabajador web?

Lo importé por esto.

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

Pero cuando se usa getDocument . Devuelve un error

Error no detectado (en promesa): No se pudo configurar el trabajador falso: "__webpack_require __ (...). Asegúrese de que no es una función"

Todos 4 comentarios

Parece (esencialmente) un duplicado del número 10039; lo más probable es que se requiera una buena cantidad de refactorización para que OffscreenCanvas sea ​​compatible de forma inmediata.

Gracias. @Snuffleupagus Vi ese problema y debería haberlo vinculado; los problemas no son idénticos en el sentido de que:

  1. OffscreenCanvas se puede usar en el hilo principal (es decir, su uso no se limita a los trabajadores web);
  2. Un trabajador web no necesita usar OffscreenCanvas (es decir, un polyfill de Canvas que no sea OffscreenCanvas podría funcionar);
  3. Un OffscreenCanvas en funcionamiento podría no ser el único problema que PDF.js tiene en los trabajadores web.

En otras palabras, OffscreenCanvas support es otro problema que resulta ser una posible alternativa a CanvasElement , pero eso por sí solo puede no ser suficiente para resolver este problema.

Mirando https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js (un ejemplo de nodo), parece que es posible que deba hacer un canvasFactory , también. ¿Qué pasa si haces eso?

¿Cómo se usa pdf.js dentro de un trabajador web?

Lo importé por esto.

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

Pero cuando se usa getDocument . Devuelve un error

Error no detectado (en promesa): No se pudo configurar el trabajador falso: "__webpack_require __ (...). Asegúrese de que no es una función"

¿Fue útil esta página
0 / 5 - 0 calificaciones