Pdf.js: वेबपैक निर्देश अभी भी 'नकली कार्यकर्ता' को लोड करने का कारण बनता है

को निर्मित 7 सित॰ 2016 · 32टिप्पणियाँ · स्रोत: mozilla/pdf.js

विन्यास:

वेब ब्राउज़र और इसका संस्करण: Chrome 52
ऑपरेटिंग सिस्टम और इसका संस्करण: OS X Yosemite
PDF.js संस्करण: 1.4.237
एक विस्तार है: नहीं

समस्या को पुन: उत्पन्न करने के लिए कदम:
मेरा कोड है:

import pdflib from 'pdfjs-dist'
pdflib.PDFJS.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.entry.js'

जैसा कि https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website#with -webpack, में वर्णित है
फिर भी मुझे अपने कंसोल में Warning: Setting up fake worker.' , जब मैं वास्तव में एक दस्तावेज़ को लोड करता हूं, जिससे ऐसा लगता है कि जैसे निर्देश काम नहीं करते।

इसके अतिरिक्त निर्देश पर शब्द "PDFJS.workerSrc _shall_ इस फ़ाइल को इंगित करने के लिए सेट किया जा सकता है" गलत है (वर्तमान वर्डिंग) का अर्थ है कि यह स्वचालित रूप से सेट है, जबकि "PDFJS.workerSrc_should_ और इस फ़ाइल को इंगित करने के लिए सेट" का अर्थ है आपके पास अपने आप को स्थापित करने के लिए।
उदाहरण कोड भी बहुत उपयोगी नहीं है क्योंकि यह रिपॉजिटरी में रिश्तेदार पथ ( pdfjsLib.PDFJS.workerSrc = '../../build/webpack/pdf.worker.bundle.js'; ) का उपयोग करता है जो कि PDFJS आयात करने वाला व्यक्ति नहीं कर पाएगा।

मैं भी उलझन में हूँ क्योंकि मैंने उन मुद्दों / पीआर के माध्यम से खोज की है जो <1 वर्ष पुराने हैं जैसे https://github.com/mozilla/pdf.js/pull/6595 जो कार्यकर्ता स्क्रिप्ट के कुछ स्वचालित लोडिंग करते हैं, लेकिन वह कोड लगता है रेपो में अब मौजूद नहीं है, इसलिए workerSrc सेटिंग और सेटिंग दोनों ही मेरे लिए फर्जी वर्कर को लोड करने का कारण बनते हैं ... नकली वर्कर को पता होता है कि वेबपैक द्वारा निर्मित वर्कर स्क्रिप्ट को कहां ढूंढना है (जैसे 1.bundle.js कार्यकर्ता है जब bundle.js स्क्रिप्ट है), तो मैं उलझन में हूं कि एक वास्तविक कार्यकर्ता इस तर्क का उपयोग क्यों नहीं कर सकता है।
मैंने workerSrc को 1.bundle.js फ़ाइल बनाने और यहां तक कि PDFWorker ( pdflib.PDFJS.PDFWorker = require('worker!pdfjs-dist/build/pdf.worker.entry.js') ) को प्रतिस्थापित करने के लिए वेबपैन के वर्कर-लोडर का उपयोग करने का संकेत देने की कोशिश की है, लेकिन ऐसा नहीं है या तो काम नहीं करता है, इसलिए मैं पूरी तरह से खो गया हूं कि कार्यकर्ता को वेबपैक के साथ कैसे काम करना चाहिए

1-other

स्रोत

agilgur5

👍4

सबसे उपयोगी टिप्पणी

मैं अपने वेबपैक प्रोजेक्ट के साथ एक ही मुद्दे में भाग गया, लेकिन मैंने इसे अलग तरीके से हल किया। वेबपैक के बंडलिंग या लोडर पर भरोसा करने के बजाय, मैंने अपने निर्माण निर्देशिका में कार्यकर्ता स्रोत की प्रतिलिपि बनाने के लिए CopyWebpackPlugin का उपयोग किया।

मेरे दर्शक में:

import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}

webpack.config.js :

const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}

ctowler 7 नव॰ 2016

👍21 ❤5 🎉4

सभी 32 टिप्पणियाँ

फर्जी कर्मचारी जानता है कि वेबपैक द्वारा निर्मित श्रमिक स्क्रिप्ट को कहां ढूंढना है (जैसे 1.bundle.js कार्यकर्ता है जब बंडल ।js स्क्रिप्ट है), तो मैं उलझन में हूं कि एक वास्तविक कार्यकर्ता इस तर्क का उपयोग क्यों नहीं कर सकता है।

जांचें कि क्या बंडल में शामिल हैं - कार्यकर्ता में यह गलत है - यह पृष्ठ लोड करने के प्रदर्शन (आकार और आकार) से है। संपूर्ण pdf.worker.js फ़ाइल को अलग बंडल में रखा जाएगा।

उदाहरण कोड भी अत्यंत उपयोगी नहीं है क्योंकि यह रिपॉजिटरी (pdfjsLib.PDFJS.workerSrc = '..////build/webpack/pdf.worker.bundle .js';) आयात करने वाले व्यक्ति का उपयोग करता है। PDFJS स्पष्ट रूप से नहीं कर पाएगा (बहुत उपयोगी उदाहरण नहीं)।

pdf.worker.bundle.js फ़ाइल आप एक बंडल आउटपुट के रूप में बनाते हैं जिसमें pdf.worker.js मॉड्यूल (pdfjs-dist से आयातित) शामिल है

मुद्दे का वर्णन स्पष्ट नहीं है। क्या आप पूर्ण उदाहरण स्रोत कोड प्रदान कर सकते हैं?

yurydelendik 8 सित॰ 2016

👍2

जांचें कि क्या बंडल में शामिल हैं - कार्यकर्ता में यह गलत है - यह पृष्ठ लोड करने के प्रदर्शन (आकार और आकार) से है। संपूर्ण pdf.worker.js फ़ाइल को अलग बंडल में रखा जाएगा।

बंडल कोड की जाँच की और पुष्टि कर सकते हैं कि इसमें कार्यकर्ता शामिल नहीं है। जैसा कि मैंने उल्लेख किया है, कार्यकर्ता स्क्रिप्ट 1.bundle.js रूप में बंडल की गई है। PDF लोड करने पर, 1.bundle.js लिए एक स्क्रिप्ट टैग मेरे <head> टैग में डाला जाता है (यदि यह PDFJS या वेबपैक से है तो निश्चित नहीं)।

pdf.worker.bundle.js फ़ाइल आप एक बंडल आउटपुट के रूप में बनाते हैं जिसमें pdf.worker.js मॉड्यूल (pdfjs-dist से आयातित) शामिल है

क्या एक ऐसा उदाहरण है जो node_modules से कार्यकर्ता स्क्रिप्ट को लोड करने के विकी में पहले, और यकीनन पसंदीदा तरीके का उपयोग करता है? विकी अनुभाग से: "कार्यकर्ता को एक अलग बंडल में बनाया जाएगा: फ़ाइल ले लो" ।/node_modules/pdfjs-dist/build/pdf.worker.entry.js "

@yurydelendik # 6595 में कार्यकर्ता के ऑटो-डिटेक्शन / लोडिंग के बारे में विस्तार से

मुद्दे का वर्णन स्पष्ट नहीं है। क्या आप पूर्ण उदाहरण स्रोत कोड प्रदान कर सकते हैं?

मैंने स्रोत कोड संलग्न नहीं किया है क्योंकि वास्तव में बहुत अधिक उपयोगी या प्रासंगिक नहीं है, लेकिन यहां एक ~ 50 लाइन सारांश है: http://pastebin.com/raw/PHs6bfby। file तर्क वस्तुतः <input type='file' /> तत्व की एक फ़ाइल है।

agilgur5 8 सित॰ 2016

👍1

@yurydelendik # 6595 में कार्यकर्ता के ऑटो-डिटेक्शन / लोडिंग के बारे में विस्तार से

यह कार्यक्षमता बंडलर्स / पैकेज़र्स के लिए अभिप्रेत नहीं है।

मैं एक पुस्तकालय का निर्माण कर रहा हूँ जो pdf.js का उपयोग करता है, इसलिए यदि किसी को मेरे पुस्तकालय के काम करने के लिए pdf.js कोड आयात करना पड़ा, तो यह थोड़ा कष्टप्रद होगा (निर्भरता का प्रबंधन)।

अभी तक हमें एक ऐसा बॉलर नहीं मिला, जो ठीक से वेब वर्कर को मैनेज करता हो और हम वेबपैक या ब्राउजर को प्राथमिकता नहीं देना चाहते - हमें एक ही समय में दोनों को सपोर्ट करने में समस्या थी।

समाधान निर्भरता की निर्भरता के प्रबंधन के लिए तुच्छ नहीं है। लेकिन ध्यान रखें कि पीडीएफ की कुशल पार्सिंग और प्रतिपादन तुच्छ कार्य नहीं है। यदि आप वेब कर्मचारी का उपयोग करना छोड़ देते हैं, और आप ऐसा करने के लिए स्वतंत्र हैं, तो यूआई प्रदर्शन को नुकसान होगा और यह आपका व्यापार बंद हो जाएगा।

मैंने स्रोत कोड संलग्न नहीं किया है क्योंकि वास्तव में बहुत अधिक उपयोगी या प्रासंगिक नहीं है

आप एक पुस्तकालय के छोटे से उदाहरण को प्रकाशित कर सकते हैं जो कि आप जो हासिल करने की कोशिश कर रहे हैं उसके इरादे को प्रदर्शित करते हैं। कोड के प्रदान किए गए स्निपेट उपयोगी नहीं हैं क्योंकि वे नहीं हैं: रन करने योग्य और नहीं कि आप क्या करने की कोशिश कर रहे हैं - एक पुस्तकालय।

yurydelendik 8 सित॰ 2016

मैं एक ही मुद्दे का अनुभव कर रहा हूं। Https://cdn.kidoju.com/support/viewer/index.html देखें
कोड https://github.com/kidoju/Kidoju-Help पर पाया जा सकता है build cmd फ़ाइल का उपयोग करें।
यह भी देखें https://github.com/kidoju/Kidoju-Help/issues/2

jlchereau 9 सित॰ 2016

यह कार्यक्षमता बंडलर्स / पैकेज़र्स के लिए अभिप्रेत नहीं है।

एहसास नहीं हुआ कि 👍

अभी तक हमें एक ऐसा बॉलर नहीं मिला, जो ठीक से वेब वर्कर को मैनेज करता हो और हम वेबपैक या ब्राउजर को प्राथमिकता नहीं देना चाहते - हमें एक ही समय में दोनों को सपोर्ट करने में समस्या थी।
समाधान निर्भरता की निर्भरता के प्रबंधन के लिए तुच्छ नहीं है। लेकिन ध्यान रखें कि पीडीएफ की कुशल पार्सिंग और प्रतिपादन तुच्छ कार्य नहीं है। यदि आप वेब कर्मचारी का उपयोग करना छोड़ देते हैं, और आप ऐसा करने के लिए स्वतंत्र हैं, तो यूआई प्रदर्शन को नुकसान होगा और यह आपका व्यापार बंद हो जाएगा।

@yurydelendik मैं वर्कर-लोडर है और Browserify में वेबवर्क है -

ऐसा लगता है कि यहाँ किया जा सकता है: https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L1132 , वर्कर के प्रवेश के लिए सीधे रास्ते का उपयोग करके
वेबपैक में var worker = require('worker!../pdf.worker.entry.js') या
ब्राउज़र में var worker = require('webworkerify')('../pdf.worker.entry.js') ।
अगर आपको लगता है कि मैंने उस पर निशान मारा है, तो मुझे उसके लिए एक पीआर लिखने में खुशी होगी।

आप एक पुस्तकालय के छोटे से उदाहरण को प्रकाशित कर सकते हैं जो कि आप जो हासिल करने की कोशिश कर रहे हैं उसके इरादे को प्रदर्शित करते हैं। कोड के प्रदान किए गए स्निपेट उपयोगी नहीं हैं क्योंकि वे नहीं हैं: रन करने योग्य और नहीं कि आप क्या करने की कोशिश कर रहे हैं - एक पुस्तकालय।

स्निपेट जो मैंने संलग्न किया है, वह सभी कोड है जो अभी के लिए लाइब्रेरी में होगा ( pdf-to-dataURL )। मैं एक त्वरित उदाहरण बना सकता है जो उस स्निपेट का उपयोग करता है यदि @jlchereau का उदाहरण पर्याप्त नहीं है (एनपीएम से pdfjs-dist आवश्यकता नहीं लगती है, इसलिए इसकी सटीकता के बारे में निश्चित नहीं है)

agilgur5 9 सित॰ 2016

Webpack में वर्कर-लोडर है और Browserify में webworkerify है - बंडल सिस्टम का पता लगाने और एक या दूसरे का उपयोग करके पूरी तरह से इस समस्या का समाधान नहीं होगा?

हाँ, मैंने कोशिश की कि # ६, ,५ पर, बाद में # ६ and ९ १ पर और फिर उसी पर पलटवार किया। Browserify में require('worker!... कारण बनता है, और webpack में require('webworkerify')(...) ।

अगर आपको लगता है कि मैंने उस पर निशान मारा है, तो मुझे उसके लिए एक पीआर लिखने में खुशी होगी।

हाँ, काम कर रहे पीआर वास्तव में अच्छा होगा। अब तक pdfjs-dist किसी भी तरह webpack के साथ काम करता है, system.js और node.js के साथ ब्राउज़र करता है; और हम इसे इसी तरह बनाए रखने की कोशिश करेंगे। धन्यवाद।

यह भी ध्यान दें कि यदि कार्यकर्ता किसी कारण (सुरक्षा या सिर्फ विरासत ब्राउज़र) के लिए उपलब्ध नहीं है, तो यह स्क्रिप्ट टैग के रूप में कोड लोड करेगा। मैं PDFWorker के लिए अतिभारित कंस्ट्रक्टर को जोड़ने की योजना बना रहा था जो एक वेब कर्मचारी को स्वीकार करेगा एक पैरामीटर है - यह कुछ वेबपैक / usecases के लिए वैकल्पिक समाधान प्रदान कर सकता है।

yurydelendik 9 सित॰ 2016

👍2

btw, वेबपैक में एंट्री-लोडर होता है जिसका उपयोग कार्यकर्तास्कैन के साथ किया जा सकता है

yurydelendik 9 सित॰ 2016

👍1

हाँ, मैंने कोशिश की कि # ६, ,५ पर, बाद में # ६ and ९ १ पर और फिर उसी पर पलटवार किया। आवश्यकता है ('कार्यकर्ता! ... ब्राउज़र में समस्या का कारण बनता है, और आवश्यकता (' webworkerify ') (...) वेबपैक में।

लेकिन यहां आपका __webpack_require__ चेक नहीं होगा
https://github.com/mozilla/pdf.js/pull/6785/commits/79c2f69c3288494c5ce2809182c896484bf4be5c#diff -5a93a8d6c23cf0a169c6ee7347478ce8R88308 ब्राउज़र से ब्राउज़र को कैसे रोक सकते हैं? (निश्चित नहीं है कि ensure हिस्सा समस्याएं पैदा कर रहा था)

हाँ, काम कर रहे पीआर वास्तव में अच्छा होगा। अब तक pdfjs-dist किसी भी तरह webpack के साथ काम करता है, system.js और node.js के साथ ब्राउज़र करता है; और हम इसे इसी तरह बनाए रखने की कोशिश करेंगे। धन्यवाद।

मैं शायद अगले हफ्ते बाद में मिलूंगा - क्या विभिन्न बंडलर्स / प्लेटफार्मों के खिलाफ जांच करने के लिए परीक्षण करना है?

मैं PDFWorker के लिए अतिभारित कंस्ट्रक्टर को जोड़ने की योजना बना रहा था जो एक वेब कर्मचारी को स्वीकार करेगा एक पैरामीटर है - यह कुछ वेबपैक / usecases के लिए वैकल्पिक समाधान प्रदान कर सकता है।

मुझे लगता है कि यह एक शानदार विकल्प होगा! विशेष रूप से, यदि यह Worker को स्वीकार कर सकता है, तो वेबपैक लोग कुछ इस तरह का उपयोग कर सकते हैं: वेबवर्कइज़- वेबपैक और वेबवर्क का उपयोग
ओवरलोड मामले में var worker = new WorkerFromArgs('../pdf.worker.entry.js') ।
यह यूजर-लैंड में वर्कर लोडर लॉजिक के कॉन्फ़िगरेशन को बंद कर देगा ताकि संभावित रूप से गंदे PRs जो कि प्लेटफ़ॉर्म / बंडलर के लिए pdf.js में चेक करें, आवश्यक नहीं हैं (यह किसी भी मामले में उचित लोडर को स्थापित करने के लिए उपयोगकर्ता पर होगा)

agilgur5 9 सित॰ 2016

फिर भी मुझे चेतावनी मिलती है: नकली कार्यकर्ता की स्थापना। ' मेरे कंसोल में जब मैं वास्तव में एक दस्तावेज़ को लोड करता हूं, जिससे यह प्रतीत होता है कि निर्देशों ने काम नहीं किया।

यह बहुत बढ़िया है, लेकिन जैसा कि ऊपर कहा गया है, बिना पूर्ण उदाहरण के पता योग्य नहीं है। क्या हम इसे बंद कर देंगे और PR की प्रतीक्षा करेंगे?

yurydelendik 9 सित॰ 2016

@jlchereau ने एक उदाहरण दिया https://github.com/mozilla/pdf.js/issues/7612#issuecomment -245973303 जहां आप इसी तरह सांत्वना में Warning: Setting up fake worker देख सकते हैं और मुझे ज़रूरत पड़ने पर एक और दे सकते हैं

यह मुद्दा अभी भी प्रासंगिक है क्योंकि workerSrc को वर्तमान कार्यान्वयन में काम करना चाहिए, लेकिन ऐसा नहीं है।
किसी भी स्थिति में, पीआर इस समस्या को हल करेगा, तो क्या इसे तब तक ट्रैकिंग के लिए खुला नहीं छोड़ा जाना चाहिए?

मैं भी पीआर शुरू करने से पहले अपने सवालों के बारे में आपकी प्रतिक्रिया सुनना चाहूंगा (जब ब्राउज़र ने __webpack_require__ की जाँच करने की कोशिश की तो शिकायत के बारे में क्यों, जैसा कि मैं अपने पीआर में भी करूंगा, और अगर कोई परीक्षण हो तो मुझे करना चाहिए सभी बंडलों / प्लेटफार्मों का परीक्षण एक साथ चलाने के लिए)

agilgur5 10 सित॰ 2016

@ agilgur5 , आप कहते हैं:

The snippet I attached is all of the code that would be in the library for now (pdf-to-dataURL).
I could make a quick example that uses that snippet if <strong i="7">@jlchereau</strong>'s example isn't good enough
(it doesn't seem to require pdfjs-dist from NPM, so not sure about the accuracy of it).

Https://github.com/kidoju/Kidoju-Help/blob/master/src/main.js और असहजता देखें जैसा कि आप फिट देखते हैं:

require('../web/viewer.css');
require('../web/compatibility.js');
// require('pdfjs-dist/web/compatibility.js');
require('../web/l10n.js');
window.pdfjsDistBuildPdf = require('../build/pdf.js');
// window.pdfjsDistBuildPdf = require('pdfjs-dist/build/pdf.js');
// require('../web/debugger.js');
require('./viewer.js');

मेरे द्वारा दोनों का प्रयास करने का कारण https://github.com/mozilla/pdf.js/blob/master/web/viewer.js और https://github.com/mozilla/pdfjs-dist/bitb/master/ है। web / pdf_viewer.js समान नहीं हैं और मैंने सभी फाइलों को एक ही स्रोत / संस्करण से रखने के लिए अधिक प्रासंगिक माना है।

वैसे भी, दोनों एक ही व्यवहार को प्रदर्शित करते हैं जहां तक कार्यकर्ता का संबंध है।

jlchereau 10 सित॰ 2016

@yurydelendik ऐसा नहीं लगता है कि आपने @jlchereau का उदाहरण अभी तक चेक किया है। मैंने इस बग को प्रदर्शित करने वाले एक छोटे पैकेज के रूप में pdf-to-dataURL भी बनाया।

मैं PDFWorker के लिए अतिभारित कंस्ट्रक्टर को जोड़ने की योजना बना रहा था जो एक वेब कर्मचारी को स्वीकार करेगा एक पैरामीटर है - यह कुछ वेबपैक / usecases के लिए वैकल्पिक समाधान प्रदान कर सकता है।

क्या इस पर कोई अपडेट हैं? जैसा कि मैंने पहले उल्लेख किया है, मुझे लगता है कि मैंने जो प्रस्तावित किया था, उसकी तुलना में यह बहुत बेहतर उपाय है (आपने मेरे द्वारा पूछे गए प्रश्नों का उत्तर नहीं दिया है, वैसे भी मैं वास्तव में पीआर नहीं बना सकता) और भविष्य के उपयोग के मामलों के लिए कहीं अधिक सामान्य है और अन्य बंडलों।

agilgur5 1 अक्तू॰ 2016

👍2

मेरे दर्शक में:

import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}

webpack.config.js :

const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}

ctowler 7 नव॰ 2016

👍21 ❤5 🎉4

@ agilgur5 , मैं सिर्फ इस मुद्दे में भाग गया था और यह इसलिए था क्योंकि मैं कॉमन्सचंकप्लगिन का उपयोग कर रहा था। मेरे मामले में, वेबवर्क लोड हो रहा था, लेकिन Uncaught ReferenceError: webpackJsonp is not defined में एक त्रुटि हुई (क्योंकि वह कोड एक आम ठग के लिए खींच लिया गया था और कार्यकर्ता के लिए उपलब्ध नहीं था)। इसके कारण कार्यकर्ता को जल्दी से बाहर निकलना पड़ा और नकली क्रियान्वयन में कमी आई।

आप या तो CommonsChuckPlugin का उपयोग नहीं कर सकते हैं या सुझाए गए समाधान @ctowler का उपयोग कर सकते हैं।

आशा है इससे तुम्हारी समस्या का समाधान हो गया होगा।

mkennedy3000 20 दिस॰ 2016

सभी को प्रणाम,
मैं Webpack के साथ काम करने वाले pdf.js बनाने के लिए बहुत संघर्ष कर रहा था। महत्वपूर्ण बात यह है कि मैं नहीं चाहता था कि कार्यकर्ता एक अलग फाइल में हो।

अगर किसी को समस्याओं का सामना करना पड़ रहा है जैसे:

Warning: Setting up fake worker. संदेश,
गैर-कार्यात्मक PDF.js कार्यकर्ता के साथ ट्रैश बंडल बनाने वाला वेबपैक,
बंडल में दो बार कार्यकर्ता सहित वेबपैक,
आपको निश्चित रूप से देखना चाहिए।

क्रमशः

मैंने अपने पैकेज में raw-loader को शामिल किया। सीधे सादे के रूप में फ़ाइलों को आयात करने में सक्षम होने के लिए।
```
"raw-loader": "latest",
```

मैंने Webpack को एक तरह से कॉन्फ़िगर किया है ताकि pdf.worker.js raw-loader माध्यम से लोड हो।

  module: {
    rules: [
      {
        test: /pdf\.worker(\.min)?\.js$/,
        use: 'raw-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/, /pdf\.worker(\.min)?\.js$/],
        use: 'babel-loader',
      },
    ],
  },

मुश्किल हिस्सा यहां से शुरू होता है। एक कार्यकर्ता को PDF.js पास करने का एकमात्र तरीका workerSrc सेटिंग है। दुर्भाग्य से, सामान की तरह कर रही है
```
pdfjsLib.PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker');
```
काम नहीं करेगा।
परंतु! हम Blob s से मक्खी पर URL बना सकते हैं, और हम मक्खी पर तार से Blob s बना सकते हैं!
तो, मेरे लिए काम कर समाधान था:
```
const pdfjsLib = require('pdfjs-dist');
const pdfjsWorker = require('pdfjs-dist/build/pdf.worker.min');

const pdfjsWorkerBlob = new Blob([pdfjsWorker]);
const pdfjsWorkerBlobURL = URL.createObjectURL(pdfjsWorkerBlob);

pdfjsLib.PDFJS.workerSrc = pdfjsWorkerBlobURL;
```
🎉: डी
सिर्फ एक और बात। PDF.js में बहुत सारी कमियाँ होती हैं, अगर कर्मी को लोड करने में कुछ गड़बड़ होती है:
js require.ensure([], function () { var worker; worker = require('./pdf.worker.js'); callback(worker.WorkerMessageHandler); });
यदि आप बंडल आकार की परवाह करते हैं और pdf.worker.min हैं, तो Webpack भ्रमित हो जाएगा और इस सामान की वजह से pdf.worker.js भी शामिल होगा। क्या और भी बदतर है, यहां तक कि PDF.js का छोटा pdf.worker.js लिए कॉल करता है। तो हम इस बकवास से कैसे निपट सकते हैं?
हम वेबपैक को एक मॉड्यूल को दूसरे के साथ बदलने के लिए कहते हैं, जैसे:
js new webpack.NormalModuleReplacementPlugin( /pdf\.worker(\.min)?\.js$/, path.join(__dirname, 'node_modules', 'pdfjs-dist', 'build', 'pdf.worker.min.js'), ),
जो यह सुनिश्चित करता है कि प्रत्येक फ़ाइल /pdf\.worker(\.min)?\.js$/ - अधिक विशेष रूप से, pdf.worker.js और pdf.worker.min.js प्रतिभूतित संस्करण के साथ प्रतिस्थापित की जाएगी।

ओह। आशा है कि यह किसी को भी मदद करता है!

wojtekmaj 13 जुल॰ 2017

👍12

@wojtekmaj हमने वेबपैक उपयोगकर्ताओं के लिए शून्य-विन्यास के लिए pdfjs-dist / webpack जोड़ा। आप इसका उपयोग https://github.com/yurydelendik/pdfjs-react पर देख सकते हैं

yurydelendik 13 जुल॰ 2017

❤17

@yurydelendik धन्यवाद, हाँ, मुझे इस बारे में पता था। हालाँकि मैंने इसे पूरी तरह से काम करने के लिए प्रबंधित नहीं किया था और मैं कई मुद्दों का सामना कर रहा था क्योंकि एक संकलित फ़ाइल को समाप्त करना मेरे लिए एक आवश्यकता थी।

ऐसा इसलिए है क्योंकि मैं प्रतिक्रिया-पीडीएफ पर काम कर रहा हूं और इसे स्थापित करने के लिए मेरे उपयोगकर्ताओं के लिए सुपर आसान होना चाहिए। package.json + आयात, उछाल, और कुछ नहीं।

ऐसा कोई तरीका नहीं है कि मैं उनसे खुद ही pdf.worker.js फिगर पाने के लिए कह सकूं, अकेले ही वेबपैक, ब्राउजर और व्हाट्सएप के लिए निर्देश लिख दें।

wojtekmaj 13 जुल॰ 2017

👍1

इसे स्थापित करने के लिए मेरे उपयोगकर्ताओं के लिए सुपर आसान होना चाहिए। package.json + आयात, उछाल, और कुछ नहीं।

@wojtekmaj मैं वास्तव में आपकी आवश्यकताओं को नहीं समझता। मैं यह नहीं देखता कि pdfjs-dist को कैसे जोड़ा जाए और pdfjs-dist / webpack का उपयोग करके प्रतिक्रिया घटक परियोजना में उपयोग करना असंभव होगा। और उपयोगकर्ता सिर्फ पूर्व (एक घटक परियोजना) को शामिल करेगा।

एक संकलित फ़ाइल के साथ समाप्त करना मेरे लिए एक आवश्यकता थी।

एक संकलित फ़ाइल वह नहीं है जो आप चाहते हैं: क) पेज स्टार्टअप के लिए, ख) कैशिंग और ट्रांसमिशन आकार, ग) कार्यकर्ता के साथ संभावित समस्याएं - लेकिन यह आपकी पसंद है।

yurydelendik 13 जुल॰ 2017

@yurydelendik
ओह, क्षमा करें, मैंने आपकी पिछली पोस्ट को गलत बताया। मुझे लगा कि आप / उदाहरण / वेबपैक के बारे में बात कर रहे हैं जो एक पूरी तरह से अलग बात है। पीडीएफजे / वेबपैक का उपयोग करने के लिए इसे निश्चित रूप से अपडेट किया जाना चाहिए! धन्यवाद!

एक और बात ... pdfjs-dist / webpack का उपयोग करने से pdf.js ही नहीं रुकता है। pdf.worker.js को अपने आप ही चालू करने की आवश्यकता होती है। मैं इसके साथ समाप्त होता हूं:

entry.bundle.js
abcdef1234567890.worker.bundle.js

जब मैं pdf.worker को प्रविष्टियों में से एक के रूप में परिभाषित करता हूं, तो यह और भी खराब हो जाता है, मैं इसके साथ समाप्त होता हूं:

entry.bundle.js
abcdef1234567890.worker.bundle.js
pdf.worker.bundle.js

मैं इस समस्या को कैसे हल करूं?

wojtekmaj 13 जुल॰ 2017

ऊपर मेरी प्रतिक्रिया-पीडीएफ उदाहरण के साथ yarn build चलने के बाद, मुझे निम्नलिखित फाइलें मिली हैं:

...
File sizes after gzip:

  198.42 KB  build/7b14afe24b211632ecc8.worker.js
  197.76 KB  build/static/js/0.974e8de4.chunk.js
  130.14 KB  build/static/js/main.5a79c9e3.js
  4.19 KB    build/static/css/main.d852b162.css
...

यह सामान्य है: ऐप 'build / static / js / main.5a79c9e3.js' सामान (pdf.js प्लस रिएक्शन), 'build / static / js / 0.974e8de4.chunk.js' 'pdf.worker.js फ़ॉलबैक कोड है जब श्रमिक अक्षम हो जाता है और '7b14afe24b211632ecc8.worker.js' कार्यकर्ता कोड का निर्माण किया जाता है। क्या मैं कुछ भूल रहा हूँ?

@wojtekmaj कृपया उपयोगकर्ता के परीक्षण ऐप के साथ पूर्ण प्रतिक्रिया घटक (उदाहरण?) तैयार करें और एसटीआर के साथ अलग मुद्दे में रिपोर्ट करें - मुझे लगता है कि आपकी विशेष समस्या इस मुद्दे से संबंधित नहीं है।

yurydelendik 14 जुल॰ 2017

PDFJS.workerSrc = 'script.bundle.js';
PDFJS.getDocument (getPdfName) तो फिर ((pdfFile: किसी भी) => {
this.pdfFile = pdfFile;
this.renderPdfIntoPages (pdfFile, getPdfPages, this.pdfReady);
});

मूल्य इस तरह असाइन करें तो इसके काम ...

धन्यवाद...

wapappdeveloper 17 मार्च 2018

@Yurydelendik समाधान का उपयोग करते समय यदि किसी को window न मिले तो कृपया त्रुटि को न डालें

globalObject: 'true'

आपके वेबपैक कॉन्फ़िगरेशन के output खंड में।
वेबपैक में एक बग लगता है, वेबपैक window ऑब्जेक्ट के साथ गड़बड़ करता है जब web workers साथ काम करते हैं। तो उपरोक्त हैक उस समस्या को हल करता है।

vivektiwary 26 अक्तू॰ 2018

@wojtekmaj :
आपके समाधान के लिए धन्यवाद! यह क्रोम, एफएफ, एज, ओपेरा, सफारी में मेरे लिए ठीक काम करता है। लेकिन जैसा कि आप इसे babel-loader से बाहर रखते हैं, इसे ES5 में वापस ट्रांसप्‍लेन्‍ड नहीं किया जाता है। तो मैं IE11 में एक समस्या और इतने पर मिलता है। या मैं वहाँ कुछ याद कर रहा हूँ?

schnetzi 6 नव॰ 2018

मैं यहां कुछ गलत कर रहा हूं, इसलिए कृपया ओह स्मार्ट लोगों को सही करें, लेकिन मैंने @wojtekmaj की

Webpack.config में:

...
{
    test: /pdf\.worker(\.min)?\.js$/,
    loader: 'file-loader'
},

और फिर, मेरे कोड में:

import PDFJS from 'pdfjs-dist';
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;
...

varunarora 18 जून 2019

👍7

विन्यास:

pdfjs-dist: 2.1.266
वेबपैक: 4.35.0

अरे, मुझे वेबपैक और pdfjs (और यह कार्यकर्ता) का उपयोग करने में कुछ परेशानी थी।

मुझे लगता है कि ऐसा होता है (मुझे नहीं पता कि pdfjs कुछ भी सुनिश्चित करने के लिए पर्याप्त है)

वेबपैक सामान के कारण, मुझे कार्यकर्ता को लोड करने की कोशिश में यह त्रुटि हुई:

मुझे इसे ठीक करने के लिए कुछ भी नहीं मिला।
seller_pdfjsWorker मौजूद था लेकिन इस रास्ते में नहीं था। मेरे मामले में, मैं चाहता हूं कि कार्यकर्ता उसी जगह पर हो जहां pdf.js हैं।
सबसे पहले मैंने वर्कर को बदलने की कोशिश की, जैसा कि wojtekmaj ने समझाया। लेकिन कार्यकर्ता को पाने के लिए मेरे कार्यकर्ता एसएसडब्ल्यूजेएस द्वारा उपयोग नहीं किया गया था। वेबपैक पार्सिंग परिवर्तन pdfjs (l.9915):

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (typeof require !== 'undefined' && typeof require.ensure === 'function') {
    useRequireEnsure = true;
  }

जांच

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (true) {
    useRequireEnsure = true;
  }

तो, नकली वॉर्करफाइल्सलैडर सेट है (l.9932):
fakeWorkerFilesLoader = useRequireEnsure ? function () {

तब, मेरे कार्यकर्ता को नकली कारण नहीं मिल रहा है

    var loader = fakeWorkerFilesLoader || function () {
      return (0, _dom_utils.loadScript)(_getWorkerSrc()).then(function () {
        return window.pdfjsWorker.WorkerMessageHandler;
      });
    };

मैंने इसे कैसे हल किया

अपने वेबपैक कॉन्फ़िगरेशन में मैंने जोड़ा:

    module: {
        noParse: (filename) => {
            return /\\node_modules\\pdfjs-dist\\build\\pdf.js/.test(filename);
        },
        rules: [
        .......................
        ]
    },

और तब मुझे यह त्रुटि हुई थी:

यह मुझे मेरी स्क्रिप्ट "ecm_viewer.worker.js" बताती है मौजूद नहीं है।
मैंने अपने वेबपैक कॉन्फ़िगरेशन में एक प्रविष्टि जोड़ी:

entry: {
    'ecm_viewer': getFileList(),
    'ecm_viewer.worker': './node_modules/pdfjs-dist/build/pdf.worker.entry',
}

और यह पूरी तरह से काम करता है, भले ही मैं noParse फ़ंक्शन को हटा दूं। जब तक मैं इस noParse वेबपैक विकल्प को नहीं जोड़ता तब तक मैं वास्तविक त्रुटि को डीबग करने में सक्षम नहीं था।

मुझे नहीं पता कि क्या मैं इसे लिखने के लिए सही जगह पर हूँ; मैं अपने पोस्ट को स्टैक्वोवरफ़्लो या कहीं और स्थानांतरित कर सकता हूं। यह एक दिन किसी की मदद कर सकता है।

Barzou 24 जुल॰ 2019

मैं अपने वेबपैक प्रोजेक्ट के साथ एक ही मुद्दे में भाग गया, लेकिन मैंने इसे अलग तरीके से हल किया। वेबपैक के बंडलिंग या लोडर पर भरोसा करने के बजाय, मैंने अपने निर्माण निर्देशिका में कार्यकर्ता स्रोत की प्रतिलिपि बनाने के लिए CopyWebpackPlugin का उपयोग किया।
मेरे दर्शक में:
import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}
webpack.config.js :
const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}

यह एक मुद्दा है कि मेरी टीम WEEKS के लिए शिकार हो रही है। साभार @ctowler : D <3

Wolven531 2 अग॰ 2019

@Yurydelendik समाधान का उपयोग करते समय यदि किसी को window न मिले तो कृपया त्रुटि को न डालें
globalObject: 'true'
आपके वेबपैक कॉन्फ़िगरेशन के output खंड में।
वेबपैक में एक बग लगता है, वेबपैक window ऑब्जेक्ट के साथ गड़बड़ करता है जब web workers साथ काम करते हैं। तो उपरोक्त हैक उस समस्या को हल करता है।

@vivektiwary मैं उसी मुद्दे पर चल रहा हूं। यह ReferenceError: Can't find variable: window कहता रहता है

मैंने Webpack.config फ़ाइल में globalObject:'true' सेटिंग की थी, लेकिन अब ऐप बिल्कुल लोड नहीं होगा। क्या आपको यकीन है कि इसने काम किया है?

taihuuho 29 अक्तू॰ 2019

@Yurydelendik समाधान का उपयोग करते समय यदि किसी को window न मिले तो कृपया त्रुटि को न डालें
globalObject: 'true'
आपके वेबपैक कॉन्फ़िगरेशन के output खंड में।
वेबपैक में एक बग लगता है, वेबपैक window ऑब्जेक्ट के साथ गड़बड़ करता है जब web workers साथ काम करते हैं। तो उपरोक्त हैक उस समस्या को हल करता है।
@vivektiwary मैं उसी मुद्दे पर चल रहा हूं। यह ReferenceError: Can't find variable: window कहता रहता है
मैंने Webpack.config फ़ाइल में globalObject:'true' सेटिंग की थी, लेकिन अब ऐप बिल्कुल लोड नहीं होगा। क्या आपको यकीन है कि इसने काम किया है?

हां @taihuuho , क्या आपने आउटपुट में इसे
btw क्या त्रुटि है जो आपको मिल रही है?

vivektiwary 30 अक्तू॰ 2019

@vivektiwary मैं इस त्रुटि हो रही है ReferenceError: Can't find variable: window का उपयोग करते समय कि pdfjs-dist/webpack

taihuuho 30 अक्तू॰ 2019

मैं यहां कुछ गलत कर रहा हूं, इसलिए कृपया ओह स्मार्ट लोगों को सही करें, लेकिन मैंने @wojtekmaj की
Webpack.config में:
...
{
    test: /pdf\.worker(\.min)?\.js$/,
    loader: 'file-loader'
},
और फिर, मेरे कोड में:
import PDFJS from 'pdfjs-dist';
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;
...

मैंने @varunarora के समाधान का उपयोग किया और यह वास्तव में अच्छी तरह से काम करता है। जाहिरा तौर पर, वेबपैक https://github.com/mozilla/pdf.js/tree/master/examples/webpack के लिए यह प्रलेखन पृष्ठ सभी के लिए काम नहीं करता है

taihuuho 30 अक्तू॰ 2019

👍1

वेबपैक कॉन्फ़िगरेशन को संपादित करने की आवश्यकता के बिना:

PDFJS.GlobalWorkerOptions.workerSrc = require('!!file-loader!pdfjs-dist/build/pdf.worker.min.js').default;

या

import PDFJS from 'pdfjs-dist';
import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;

और निश्चित रूप से सुनिश्चित करें कि आपके पास file-loader स्थापित हैं।

मैं इलेक्ट्रॉन-फोर्ज का उपयोग कर रहा हूं, जिसके कारण फाइल-लोडर को कार्यकर्ता को एक निर्देशिका में रखना पड़ा, इसलिए मुझे इसका उपयोग करना पड़ा

PDFJS.GlobalWorkerOptions.workerSrc = '../' + require('!!file-loader!pdfjs-dist/build/pdf.worker.min.js').default;

https://webpack.js.org/concepts/loaders/#inline

thomassuckow 21 जन॰ 2020

👍4

फ़ाइल-लोडर का उपयोग करने से किसी भी तरह से मेरे ऐप के बाकी हिस्सों पर दुष्प्रभाव पड़ता है, क्योंकि अन्य लिब्रिरियों को इसकी आवश्यकता होती है। तो दूसरा तरीका जो मुझे मिला वह है cdn से pdf.worker.js फ़ाइल प्राप्त करना:

सीएफ यहाँ: https://github.com/wojtekmaj/react-pdf/issues/321#issuecomment -451291757

Marcvander 3 जून 2020

क्या यह पृष्ठ उपयोगी था?

5 / 5 - 1 रेटिंग्स

Pdf.js: वेबपैक निर्देश अभी भी 'नकली कार्यकर्ता' को लोड करने का कारण बनता है

सबसे उपयोगी टिप्पणी

सभी 32 टिप्पणियाँ

क्रमशः

मुझे लगता है कि ऐसा होता है (मुझे नहीं पता कि pdfjs कुछ भी सुनिश्चित करने के लिए पर्याप्त है)

मैंने इसे कैसे हल किया

संबंधित मुद्दों