Pdf.js: Jalankan rendering kanvas PDF.js di web-worker

Dibuat pada 29 Nov 2018 · 4Komentar · Sumber: mozilla/pdf.js

Konfigurasi:

Chrome 71
Sistem operasi dan versinya: apa saja
Versi PDF.js: 2.0.943
Apakah ekstensi browser: tidak

Langkah-langkah untuk mereproduksi masalah:

Tulis pekerja web seperti ini:

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

Sebut ini dengan misalnya w = new Worker('sample-pdf.js');

Apa perilaku yang diharapkan? (tambahkan tangkapan layar)

PDF akan dirender ke OffscreenCanvas

Apa yang salah? (tambahkan tangkapan layar)

ReferenceError: dokumen tidak ditentukan
di GenericFontLoader.insertRule (pdf.js:10154)
di GenericFontLoader.bind (pdf.js:10205)
di WorkerTransport.(pdf.js:9177)
di LoopbackPort.MessageHandler._onComObjOnMessage (pdf.js:12833)
di LoopbackPort.(pdf.js:8681)
di Array.forEach ()

yaitu ini gagal:

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

Masalahnya adalah tidak adanya DOM. Masalahnya mungkin salah satu dokumentasi, karena PDF.js memiliki contoh Node , atau mungkin ada masalah yang mengintai. Bagaimanapun saya ingin melaporkannya jika ada beberapa pedoman yang jelas di sini.

1-core

Sumber

brianmhunt

👍8

Komentar yang paling membantu

Bagaimana Anda menggunakan pdf.js di dalam pekerja web?

Saya mengimpornya dengan ini.

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

Tetapi ketika menggunakan getDocument . Ini mengembalikan kesalahan

Tidak tertangkap (dalam janji) Kesalahan: Menyiapkan pekerja palsu gagal: "__webpack_require__(...). pastikan bukan fungsi"

tandat2209 pada 24 Apr 2020

👍3

Semua 4 komentar

Terlihat (pada dasarnya) seperti duplikat dari edisi #10039; kemungkinan besar, jumlah yang cukup dari re-factoring akan diperlukan untuk OffscreenCanvas untuk didukung out-of-the-box.

Snuffleupagus pada 29 Nov 2018

Terima kasih. @Snuffleupagus Saya melihat masalah itu, dan seharusnya menautkannya; masalahnya tidak identik dalam arti bahwa:

OffscreenCanvas dapat digunakan di utas utama (yaitu penggunaannya tidak terbatas pada pekerja web);
Seorang pekerja web tidak perlu menggunakan OffscreenCanvas (yaitu polyfill Canvas selain OffscreenCanvas mungkin berfungsi);
OffscreenCanvas yang berfungsi mungkin bukan satu-satunya masalah yang dimiliki PDF.js pada pekerja web.

Dengan kata lain dukungan OffscreenCanvas adalah masalah lain yang kebetulan merupakan alternatif yang memungkinkan untuk CanvasElement , tetapi itu saja mungkin tidak cukup untuk menyelesaikan masalah ini.

brianmhunt pada 29 Nov 2018

Melihat https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js (contoh simpul), sepertinya Anda mungkin perlu membuat canvasFactory , juga. Apa yang terjadi jika Anda melakukan itu?

jsoo1 pada 8 Mei 2019

Bagaimana Anda menggunakan pdf.js di dalam pekerja web?

Saya mengimpornya dengan ini.

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

Tetapi ketika menggunakan getDocument . Ini mengembalikan kesalahan