Pdf.js: لا تزال تعليمات Webpack تتسبب في تحميل "عامل مزيف"

تم إنشاؤها على ٧ سبتمبر ٢٠١٦  ·  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 من القيام بها.

أنا أيضًا مرتبك لأنني بحثت في المشكلات / العلاقات العامة التي يقل عمرها عن عام واحد مثل https://github.com/mozilla/pdf.js/pull/6595 التي تقوم ببعض التحميل التلقائي لنص العامل ، ولكن هذا الرمز يبدو لم يعد موجودًا في الريبو ، لذلك يتسبب كل من الإعداد وعدم تعيين workerSrc في تحميل العامل المزيف لي ... يعرف العامل المزيف مكان العثور على البرنامج النصي الخاص بالعامل الذي تم إنشاؤه بواسطة webpack (على سبيل المثال 1.bundle.js هو العامل عندما يكون bundle.js هو البرنامج النصي) ، لذلك أنا في حيرة من أمري لماذا لا يستطيع العامل الحقيقي استخدام هذا المنطق أيضًا.
لقد حاولت توجيه workerSrc إلى الملف 1.bundle.js تم إنشاؤه وحتى استخدام أداة تحميل عامل webpack لإنشاء مثيل واستبدال PDFWorker ( pdflib.PDFJS.PDFWorker = require('worker!pdfjs-dist/build/pdf.worker.entry.js') ) ، لكن ذلك لم يحدث لا يعمل أيضًا ، لذا فقد فقدت تمامًا كيف يفترض أن يعمل العامل مع webpack

1-other
مصدر
picture agilgur5
👍4

التعليق الأكثر فائدة

واجهت نفس المشكلة مع مشروع webpack الخاص بي ، لكنني قمت بحلها بشكل مختلف. بدلاً من الاعتماد على حزم أو أدوات تحميل حزمة الويب ، استخدمت 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'
      }])
   }]
}
picture ctowler في ٧ نوفمبر ٢٠١٦
👍21 ❤5 🎉4

ال 32 كومينتر

يعرف العامل المزيف مكان العثور على النص البرمجي للعمال الذي تم إنشاؤه بواسطة webpack (على سبيل المثال ، 1.bundle.js هو العامل عندما يكون bundle.js هو النص) ، لذلك أنا في حيرة من أمري لماذا لا يستطيع العامل الحقيقي استخدام هذا المنطق أيضًا.

تحقق مما إذا كانت bundle.js تتضمن عاملًا - فمن الخطأ (من أداء تحميل الصفحة وحجمها) وجودها هناك. يجب وضع ملف pdf.worker.js بأكمله في حزمة منفصلة.

رمز المثال أيضًا ليس مفيدًا للغاية لأنه يستخدم المسارات النسبية في المستودع (pdfjsLib.PDFJS.workerSrc = '../../build/webpack/pdf.worker.bundle.js' ؛) التي يستوردها الشخص من الواضح أن PDFJS لن يكون قادرًا على القيام بذلك (ليس مثالًا مفيدًا جدًا).

ملف pdf.worker.bundle.js الذي تقوم بإنشائه كمخرج حزمة يتضمن وحدة pdf.worker.js (مستوردة من pdfjs-dist)

وصف القضية غير واضح. هل يمكنك تقديم مثال كامل لشفرة المصدر؟

yurydelendik picture yurydelendik في ٨ سبتمبر ٢٠١٦
👍2

تحقق مما إذا كانت bundle.js تتضمن عاملًا - فمن الخطأ (من أداء تحميل الصفحة وحجمها) وجودها هناك. يجب وضع ملف pdf.worker.js بأكمله في حزمة منفصلة.

فحص الكود المرفق ويمكن تأكيد أنه لا يشمل العامل. كما ذكرت ، يتم تجميع البرنامج النصي للعامل كـ 1.bundle.js . عند تحميل ملف PDF ، يتم إدراج علامة البرنامج النصي لـ 1.bundle.js في علامة <head> (لست متأكدًا مما إذا كان هذا من PDFJS أو webpack).

ملف pdf.worker.bundle.js الذي تقوم بإنشائه كمخرج حزمة يتضمن وحدة pdf.worker.js (مستوردة من pdfjs-dist)

هل هناك مثال يستخدم الطريقة الأولى ، والمفضلة للجدل ، في الويكي لتحميل نص العامل من node_modules ؟ من قسم wiki: "يجب بناء العامل في حزمة منفصلة: خذ الملف" ./node_modules/pdfjs-dist/build/pdf.worker.entry.js "

yurydelendik هل يمكنك توضيح الاكتشاف / التحميل التلقائي للعامل في # 6595 الذي يبدو أنه لم يعد موجودًا في قاعدة البيانات؟ أنا أقوم بإنشاء مكتبة تستخدم pdf.js ، لذلك إذا اضطر شخص ما إلى استيراد كود pdf.js لجعل مكتبتي تعمل ، فسيكون ذلك مملاً إلى حد ما (إدارة التبعيات).

وصف القضية غير واضح. هل يمكنك تقديم مثال كامل لشفرة المصدر؟

لم أرفق الكود المصدري لأنه لا يوجد في الحقيقة الكثير من الأمور الأخرى المفيدة أو ذات الصلة ، ولكن إليك ما يقرب من 50 سطر ملخص: http://pastebin.com/raw/PHs6bfby. الوسيطة file هي حرفياً ملف من عنصر <input type='file' /> .

agilgur5 picture agilgur5 في ٨ سبتمبر ٢٠١٦
👍1

yurydelendik هل يمكنك توضيح الاكتشاف / التحميل التلقائي للعامل في # 6595 الذي يبدو أنه لم يعد موجودًا في قاعدة البيانات؟

هذه الوظيفة ليست مخصصة للمجمعات / الحزم.

أنا أقوم بإنشاء مكتبة تستخدم pdf.js ، لذلك إذا اضطر شخص ما إلى استيراد رمز pdf.js لجعل مكتبتي تعمل ، فسيكون ذلك مزعجًا بعض الشيء (إدارة التبعيات).

حتى الآن لم نعثر على أداة تجميع تدير عامل الويب بشكل صحيح ولا نريد إعطاء تفضيلات لحزمة الويب أو المتصفح - واجهتنا مشكلة في دعم كليهما في نفس الوقت.

الحل هو أن إدارة التبعيات ليست تافهة. لكن ضع في اعتبارك أن التحليل الفعال وتقديم ملفات PDF ليست مهمة تافهة. إذا تخلت عن استخدام عامل الويب ، وكنت حرًا في القيام بذلك ، فسوف يتأثر أداء واجهة المستخدم وستكون مقايضتك.

لم أرفق شفرة المصدر لأنه لا يوجد في الحقيقة الكثير من الأمور الأخرى المفيدة أو ذات الصلة

يمكنك نشر مثال صغير لمكتبة توضح القصد من ما تحاول تحقيقه. المقتطفات المقدمة من التعليمات البرمجية ليست مفيدة لأنها ليست: قابلة للتشغيل وليس ما تحاول القيام به - مكتبة.

yurydelendik picture yurydelendik في ٨ سبتمبر ٢٠١٦

أواجه نفس المشكلة. راجع https://cdn.kidoju.com/support/viewer/index.html.
يمكن العثور على الكود على https://github.com/kidoju/Kidoju-Help. استخدم ملف cmd build .
راجع أيضًا https://github.com/kidoju/Kidoju-Help/issues/2.

jlchereau picture jlchereau في ٩ سبتمبر ٢٠١٦

هذه الوظيفة ليست مخصصة للمجمعات / الحزم.

لم أدرك ذلك 👍

حتى الآن لم نعثر على أداة تجميع تدير عامل الويب بشكل صحيح ولا نريد إعطاء تفضيلات لحزمة الويب أو المتصفح - واجهتنا مشكلة في دعم كليهما في نفس الوقت.
الحل هو أن إدارة التبعيات ليست تافهة. لكن ضع في اعتبارك أن التحليل الفعال وتقديم ملفات PDF ليست مهمة تافهة. إذا تخلت عن استخدام عامل الويب ، وكنت حرًا في القيام بذلك ، فسوف يتأثر أداء واجهة المستخدم وستكون مقايضتك.

yurydelendik أنا أتفق معك ولكني لا أعتقد أنه يجب إجراء المقايضة. يحتوي Webpack على أداة تحميل عاملة و Browserify لديه webworkify - ألا يؤدي اكتشاف نظام التجميع واستخدام أحدهما أو الآخر إلى حل هذه المشكلة تمامًا؟

يبدو أنه يمكن القيام بذلك هنا: 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') في browserify.
إذا كنت تعتقد أنني وصلت إلى الهدف من خلال ذلك ، فسأكون سعيدًا بكتابة العلاقات العامة لذلك.

يمكنك نشر مثال صغير لمكتبة توضح القصد من ما تحاول تحقيقه. المقتطفات المقدمة من التعليمات البرمجية ليست مفيدة لأنها ليست: قابلة للتشغيل وليس ما تحاول القيام به - مكتبة.

المقتطف الذي أرفقته هو كل الكود الذي سيكون في المكتبة الآن ( pdf-to-dataURL ). يمكنني تقديم مثال سريع يستخدم هذا المقتطف إذا لم يكن مثال jlchereau جيدًا بما يكفي (لا يبدو أنه يتطلب pdfjs-dist من NPM ، لذلك لست متأكدًا من دقته)

agilgur5 picture agilgur5 في ٩ سبتمبر ٢٠١٦

يحتوي Webpack على أداة تحميل عاملة و Browserify لديه webworkerify - ألا يؤدي اكتشاف نظام التجميع واستخدام أحدهما أو الآخر إلى حل هذه المشكلة تمامًا؟

نعم ، لقد جربت ذلك في # 6785 ، ولاحقًا عند # 6791 ، ثم قمت بإعادة ذلك. يتسبب وجود require('worker!... حدوث مشكلة في browserify و require('webworkerify')(...) في حزمة الويب.

إذا كنت تعتقد أنني وصلت إلى الهدف من خلال ذلك ، فسأكون سعيدًا بكتابة العلاقات العامة لذلك.

نعم ، سيكون العمل في العلاقات العامة جيدًا حقًا. حتى الآن يعمل pdfjs-dist بطريقة ما مع webpack ، و browserify مع system.js و node.js ؛ وسنحاول أن نبقيها على هذا النحو. شكر.

لاحظ أيضًا أنه إذا لم يكن العامل متاحًا لسبب ما (الأمان أو مجرد متصفح قديم) ، فيجب عليه تحميل التعليمات البرمجية كعلامة نصية. كنت أخطط لإضافة مُنشئ زائد التحميل لـ PDFWorker والذي يقبل أن يكون عامل الويب معلمة - قد يوفر هذا الحل البديل لبعض حالات استخدام webpack / browserify.

yurydelendik picture yurydelendik في ٩ سبتمبر ٢٠١٦
👍2

راجع للشغل ، يحتوي webpack على محمل دخول يمكن استخدامه مع workerSrc

yurydelendik picture yurydelendik في ٩ سبتمبر ٢٠١٦
👍1

نعم ، لقد جربت ذلك في # 6785 ، ولاحقًا عند # 6791 ، ثم قمت بإعادة ذلك. طلب ('worker! ... يسبب مشكلة في browserify ، ويتطلب (' webworkerify ') (...) في حزمة الويب.

ولكن أليس لديك __webpack_require__ الشيك هنا
https://github.com/mozilla/pdf.js/pull/6785/commits/79c2f69c3288494c5ce2809182c896484bf4be5c#diff -5f93a8d6c23cf0a169c6ee7347477ce8R30 منع المتصفح من تحليل هذا البيان؟ (لست متأكدًا مما إذا كان الجزء ensure يسبب مشاكل)

نعم ، سيكون العمل في العلاقات العامة جيدًا حقًا. حتى الآن يعمل pdfjs-dist بطريقة ما مع webpack ، و browserify مع system.js و node.js ؛ وسنحاول أن نبقيها على هذا النحو. شكر.

من المحتمل أن أصل إلى هذا في وقت لاحق من الأسبوع المقبل - هل هناك اختبار للتشغيل للتحقق من مختلف الحزم / المنصات؟

كنت أخطط لإضافة مُنشئ زائد التحميل لـ PDFWorker والذي يقبل أن يكون عامل الويب معلمة - قد يوفر هذا الحل البديل لبعض حالات استخدام webpack / browserify.

أعتقد أن هذا سيكون بديلاً رائعًا! على وجه التحديد ، إذا كان بإمكانه قبول فئة Worker ، فيمكن لأفراد حزمة الويب استخدام شيء مثل: webworkify-webpack و browserify يستخدم الأشخاص webworkify ويمررون المحمل / العامل كحجة. لذلك سيكون
var worker = new WorkerFromArgs('../pdf.worker.entry.js') في حالة التحميل الزائد.
سيؤدي ذلك إلى إلغاء تحميل تكوين منطق تحميل العمال إلى أرض المستخدم ، لذا فإن العلاقات العامة التي يحتمل أن تكون فوضوية والتي تتحقق من النظام الأساسي / الحزم في ملف pdf.js ليست ضرورية (سيكون على المستخدم تثبيت المحمل المناسب في أي حال)

agilgur5 picture agilgur5 في ٩ سبتمبر ٢٠١٦

ومع ذلك أتلقى تحذيرًا: إنشاء عامل وهمي. في وحدة التحكم الخاصة بي عندما أقوم بالفعل بتحميل مستند ، مما يجعل الأمر يبدو وكأن الإرشادات لم تنجح.

هذا رائع ، ولكن كما ذكر أعلاه ، لا يمكن معالجة المشكلة بدون مثال كامل. يجب علينا إغلاق هذا واحد وانتظار العلاقات العامة؟

yurydelendik picture yurydelendik في ٩ سبتمبر ٢٠١٦

أعطى jlchereau مثالاً واحدًا https://github.com/mozilla/pdf.js/issues/7612#issuecomment -245973303 حيث يمكنك بالمثل رؤية Warning: Setting up fake worker في وحدة التحكم ويمكنني إعطاء آخر إذا لزم الأمر

لا تزال هذه المشكلة ذات صلة حيث يجب أن يعمل workerSrc في التطبيق الحالي ، لكنه لا يعمل.
على أي حال ، فإن العلاقات العامة ستحل هذه المشكلة ، لذا ألا يجب تركها مفتوحة للتتبع حتى ذلك الحين؟

أود أيضًا أن أسمع ملاحظاتك على أسئلتي أعلاه قبل بدء العلاقات العامة (بخصوص سبب شكوى المتصفح عندما حاولت التحقق من __webpack_require__ ، كما سأفعل الشيء نفسه في العلاقات العامة الخاصة بي ، وإذا كان هناك أي اختبارات يجب علي تشغيل لاختبار جميع الحزم / الأنظمة الأساسية في وقت واحد)

agilgur5 picture agilgur5 في ١٠ سبتمبر ٢٠١٦

@ 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/blob/master/ web / pdf_viewer.js ليسا

على أي حال ، كلاهما يظهر نفس السلوك فيما يتعلق بالعامل.

jlchereau picture jlchereau في ١٠ سبتمبر ٢٠١٦

yurydelendik لا يبدو أنك قمت بسحب مثالjlchereau حتى الآن. لقد صنعت أيضًا pdf-to-dataURL كحزمة صغيرة تعرض هذا الخطأ.

كنت أخطط لإضافة مُنشئ زائد التحميل لـ PDFWorker والذي يقبل أن يكون عامل الويب معلمة - قد يوفر هذا الحل البديل لبعض حالات استخدام webpack / browserify.

هل هناك أي تحديثات على هذا؟ كما ذكرت سابقًا ، أشعر أن هذا حل أفضل بكثير من الحل الذي اقترحته (والذي لم تجب عليه على الأسئلة التي طرحتها لذلك لم أستطع حقًا إجراء علاقات عامة على أي حال) وهو أكثر عمومية لحالات الاستخدام المستقبلية و حزم أخرى.

agilgur5 picture agilgur5 في ١ أكتوبر ٢٠١٦
👍2

واجهت نفس المشكلة مع مشروع webpack الخاص بي ، لكنني قمت بحلها بشكل مختلف. بدلاً من الاعتماد على حزم أو أدوات تحميل حزمة الويب ، استخدمت 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 picture ctowler في ٧ نوفمبر ٢٠١٦
👍21 ❤5 🎉4

@ agilgur5 ، لقد واجهت للتو هذه المشكلة وكان ذلك لأنني كنت أستخدم CommonsChunkPlugin. في حالتي ، كان عامل الويب يتم تحميله ولكنه واجه خطأ Uncaught ReferenceError: webpackJsonp is not defined (لأن هذا الرمز تم سحبه إلى جزء مشترك ولم يكن متاحًا للعامل). تسبب هذا في خروج العامل مبكرًا والعودة إلى التنفيذ الوهمي.

لا يمكنك استخدام CommonsChuckPlugin أو استخدام الحل المقترح ctowler .

نأمل أن يكون هذا يحل مشكلتك.

mkennedy3000 picture mkennedy3000 في ٢٠ ديسمبر ٢٠١٦

مرحبا جميعا،
كنت أعاني كثيرًا لجعل pdf.js يعمل مع Webpack. الشيء الرئيسي هو أنني لا أريد أن يكون العامل في ملف منفصل.

إذا كان أي شخص يواجه مشاكل مثل:

  • Warning: Setting up fake worker. ،
  • يقوم Webpack بإنشاء حزم المهملات باستخدام عامل PDF.js غير وظيفي ،
  • Webpack بما في ذلك العامل مرتين في الحزمة ،
    يجب عليك بالتأكيد إلقاء نظرة.

خطوة بخطوة

  1. لقد قمت بتضمين raw-loader في package.json لأتمكن من استيراد الملفات كنص عادي.

    "raw-loader": "latest",

  2. لقد قمت بتكوين 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',
      },
    ],
  },

  3. وهنا يظهر الجزء الخداع. الطريقة الوحيدة لتمرير عامل إلى PDF.js هي عبر إعداد workerSrc . للأسف ، القيام بأشياء مثل

    pdfjsLib.PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker');

    لن يعمل.
    لكن! يمكننا إنشاء عناوين URL أثناء التنقل من Blob s ، ويمكننا إنشاء 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;

    🎉: د

  4. شيء واحد فقط. يحتوي 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 . فكيف نتعامل مع هذا الهراء؟
    نطلب من Webpack استبدال وحدة بأخرى ، تمامًا كما يلي:
    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 picture wojtekmaj في ١٣ يوليو ٢٠١٧
👍12

wojtekmaj أضفنا pdfjs-dist / webpack للتكوين الصفري لمستخدمي webpack. يمكنك مشاهدة استخدامه على https://github.com/yurydelendik/pdfjs-react

yurydelendik picture yurydelendik في ١٣ يوليو ٢٠١٧
❤17

yurydelendik شكرًا ، نعم ، كنت على علم بهذا. على الرغم من أنني لم أتمكن من تشغيله بشكل كامل وكنت أواجه مشكلات متعددة حيث كان الانتهاء من ملف مجمع واحد أمرًا ضروريًا بالنسبة لي.

هذا لأنني أعمل على رد فعل pdf ويجب أن يكون من السهل جدًا على المستخدمين تثبيته. package.json + import ، boom ، ولا شيء آخر.

لا توجد طريقة يمكنني من خلالها إخبارهم برسم ملف pdf.worker.js بمفردهم ، ناهيك عن كتابة تعليمات لحزمة الويب و browserify وما إلى ذلك.

wojtekmaj picture wojtekmaj في ١٣ يوليو ٢٠١٧
👍1

يجب أن يكون من السهل جدًا على المستخدمين تثبيته. package.json + import ، boom ، ولا شيء آخر.

wojtekmaj أنا لا أفهم حقًا متطلباتك. لا أرى كيف سيكون من المستحيل استخدام إضافة pdfjs-dist واستخدام pdfjs-dist / webpack في مشروع مكون تفاعل. وسيشمل المستخدم فقط السابق (مشروع مكون).

انتهى الأمر بملف مترجم واحد كان ضرورة بالنسبة لي.

الملف المترجم ليس ما تريده: أ) لبدء تشغيل الصفحة ، ب) التخزين المؤقت وحجم الإرسال ، ج) المشاكل المحتملة مع العامل - ولكن هذا هو اختيارك.

yurydelendik picture yurydelendik في ١٣ يوليو ٢٠١٧

تضمين التغريدة
أوه ، آسف ، لقد أخطأت في قراءة منشورك السابق. اعتقدت أنك تتحدث عن / أمثلة / webpack وهو أمر مختلف تمامًا. يجب بالتأكيد تحديثه لاستخدام pdfjs / webpack! شكرا لك!

شيء آخر ... استخدام 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 picture wojtekmaj في ١٣ يوليو ٢٠١٧

بعد تشغيل yarn build مع مثال رد فعل pdf أعلاه ، لدي الملفات التالية:

...
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 plus reaction) ، 'build / static / js / 0.974e8de4.chunk.js' هو كود احتياطي pdf.worker.js يتم تحميله عند تعطيل العامل ورمز العامل "build / 7b14afe24b211632ecc8.worker.js". هل فاتني شيء؟

wojtekmaj ، يرجى إعداد مكون رد الفعل الكامل (مثال؟) مع تطبيق اختبار المستخدم والإبلاغ في المشكلة المنفصلة مع STR - أعتقد أن مشكلتك الخاصة لا تتعلق بهذه المشكلة.

yurydelendik picture yurydelendik في ١٤ يوليو ٢٠١٧

PDFJS.workerSrc = 'scripts.bundle.js'؛
PDFJS.getDocument (getPdfName). ثم ((pdfFile: أي) => {
this.pdfFile = pdfFile ؛
this.renderPdfIntoPages (pdfFile، getPdfPages، this.pdfReady) ؛
}) ؛

قم بتعيين القيمة مثل هذا ثم أعماله ...

شكر...

wapappdeveloper picture wapappdeveloper في ١٧ مارس ٢٠١٨

أثناء استخدام حل yurydelendik إذا حصل أي شخص على window خطأ غير محدد ، يرجى وضعه

globalObject: 'true'

في المقطع output لتكوين حزمة الويب الخاصة بك.
يبدو أن هناك خطأ في حزمة الويب ، حيث تتسبب حزمة الويب في العبث بكائن window عند العمل مع web workers . لذا فإن الاختراق أعلاه يحل هذه المشكلة.

vivektiwary picture vivektiwary في ٢٦ أكتوبر ٢٠١٨

wojtekmaj :
شكرا على الحل الخاص بك! إنه يعمل بشكل جيد بالنسبة لي في Chrome و FF و Edge و Opera و Safari. ولكن نظرًا لاستبعادها من babel-loader فلن يتم نقلها مرة أخرى إلى ES5. لذلك لدي مشكلة في IE11 وما إلى ذلك. أم أنني أفتقد شيئًا هناك؟

schnetzi picture schnetzi في ٦ نوفمبر ٢٠١٨

قد أكون أفعل شيئًا خاطئًا هنا ، لذا يرجى تصحيح الأشخاص الأذكياء ، لكنني أخذت قطار فكر 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 picture varunarora في ١٨ يونيو ٢٠١٩
👍7

ترتيب :

  • pdfjs-dist: 2.1.266
  • حزمة الويب: 4.35.0

مرحبًا ، لقد واجهت بعض المشاكل في استخدام حزم الويب و pdfjs (وهي عامل).

ما أعتقد أنه يحدث (لا أعرف ملفات pdfj بما يكفي لأتأكد من أي شيء)

بسبب عناصر حزمة الويب ، واجهت هذا الخطأ أثناء محاولة تحميل العامل:

image

لم أجد أي شيء لإصلاحه.
كان العامل موجودًا ولكن لم يكن في هذا المسار. في حالتي ، أريد أن يكون العامل في نفس المكان حيث يوجد pdf.js.
في البداية حاولت تغيير workerSrc ، كما أوضح wojtekmaj. لكن لم يتم استخدام workerSrc من قِبل pdfjs للحصول على العامل. تغيير تحليل حزمة الويب بتنسيق pdfjs (لتر 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;
  }

لذلك ، تم تعيين fakeWorkerFilesLoader (9932):
fakeWorkerFilesLoader = useRequireEnsure ? function () {

بعد ذلك ، لم يتم التعرف على workerSrc الخاص بي لأنه تم تعريف fakeWorkerFilesLoader:

    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: [
        .......................
        ]
    },

ثم كان لدي هذا الخطأ:
image

يخبرني أن البرنامج النصي "ecm_viewer.worker.js" غير موجود.
أضفت إدخالًا في تهيئة حزمة الويب الخاصة بي:

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

وهو يعمل بشكل مثالي ، حتى لو قمت بإزالة وظيفة noParse. لم أتمكن من تصحيح الخطأ الحقيقي حتى أضفت خيار حزمة الويب noParse.

لا أعرف ما إذا كنت في المكان المناسب لكتابة هذا ؛ يمكنني نقل منشوري على stackoverflow أو في مكان آخر. قد يساعد شخص ما في يوم من الأيام.

Barzou picture Barzou في ٢٤ يوليو ٢٠١٩

واجهت نفس المشكلة مع مشروع webpack الخاص بي ، لكنني قمت بحلها بشكل مختلف. بدلاً من الاعتماد على حزم أو أدوات تحميل حزمة الويب ، استخدمت 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 : D <3

Wolven531 picture Wolven531 في ٢ أغسطس ٢٠١٩

أثناء استخدام حل yurydelendik إذا حصل أي شخص على window خطأ غير محدد ، يرجى وضعه

globalObject: 'true'

في المقطع output لتكوين حزمة الويب الخاصة بك.
يبدو أن هناك خطأ في حزمة الويب ، حيث تتسبب حزمة الويب في العبث بكائن window عند العمل مع web workers . لذا فإن الاختراق أعلاه يحل هذه المشكلة.

vivektiwary أواجه نفس المشكلة. يبقى يقول ReferenceError: Can't find variable: window

لقد وضعت إعداد globalObject:'true' في ملف Webpack.config لكن التطبيق لن يتم تحميله على الإطلاق. هل أنت متأكد من أنها عملت؟

taihuuho picture taihuuho في ٢٩ أكتوبر ٢٠١٩

أثناء استخدام حل yurydelendik إذا حصل أي شخص على window خطأ غير محدد ، يرجى وضعه

globalObject: 'true'

في المقطع output لتكوين حزمة الويب الخاصة بك.
يبدو أن هناك خطأ في حزمة الويب ، حيث تتسبب حزمة الويب في العبث بكائن window عند العمل مع web workers . لذا فإن الاختراق أعلاه يحل هذه المشكلة.

vivektiwary أواجه نفس المشكلة. يبقى يقول ReferenceError: Can't find variable: window

لقد وضعت إعداد globalObject:'true' في ملف Webpack.config لكن التطبيق لن يتم تحميله على الإطلاق. هل أنت متأكد من أنها عملت؟

نعم taihuuho ، هل وضعت ذلك في obj الإخراج في التكوين؟
راجع للشغل ما هو الخطأ الذي تحصل عليه؟

vivektiwary picture vivektiwary في ٣٠ أكتوبر ٢٠١٩

vivektiwary تظهر لي هذا الخطأ ReferenceError: Can't find variable: window عند استخدام pdfjs-dist/webpack

taihuuho picture taihuuho في ٣٠ أكتوبر ٢٠١٩

قد أكون أفعل شيئًا خاطئًا هنا ، لذا يرجى تصحيح الأشخاص الأذكياء ، لكنني أخذت قطار فكر 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 والذي يعمل جيدًا حقًا. على ما يبدو ، لا يبدو أن صفحة التوثيق هذه لـ Webpack https://github.com/mozilla/pdf.js/tree/master/examples/webpack تعمل مع الجميع

taihuuho picture taihuuho في ٣٠ أكتوبر ٢٠١٩
👍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 picture thomassuckow في ٢١ يناير ٢٠٢٠
👍4

كان لاستخدام أداة تحميل الملفات بطريقة ما آثار جانبية على بقية تطبيقي ، لأن مكتبات أخرى تحتاجها. الطريقة الأخرى التي وجدتها هي الحصول على ملف pdf.worker.js من cdn:

راجع هنا: https://github.com/wojtekmaj/react-pdf/issues/321#issuecomment -451291757

Marcvander picture Marcvander في ٣ يونيو ٢٠٢٠
هل كانت هذه الصفحة مفيدة؟
5 / 5 - 1 التقييمات

القضايا ذات الصلة

dmisdm picture dmisdm  ·  3تعليقات
SehyunPark picture SehyunPark  ·  3تعليقات
brandonros picture brandonros  ·  3تعليقات
THausherr picture THausherr  ·  3تعليقات
jigskpatel picture jigskpatel  ·  3تعليقات