הצגת קובץ PDF בריאקט.

[פרגית]

אשמח לעזרתכם.
אני מנסה להציג תמונה ששמורה כקובץ PDF, באפליקציה שיצרתי בריאקט.
ניסיתי להשתמש ב--react-pdf-to-image אבל קיבלתי שגיאה:
ERROR in ./node_modules/pdfjs-dist/webpack.js
Module not found: Error: Can't resolve 'worker-loader' in 'C:\react\‏‏


התקנתי את worker-loader ואז קיבלתי 11 שגיאות חדשות.
מתוכן:
* ERROR in ./node_modules/worker-loader/node_modules/schema-utils/src/validateOptions.js
...Module not found: Error: Can't resolve 'fs' in 'C: (למרות שהוספתי "fs": false, בpackage.json)
* ERROR in (webpack)/lib/node/NodeTargetPlugin.js
...Module not found: Error: Can't resolve 'module' in 'C:
ועוד שגיאה שחוזרת על עצמה 9 פעמים על קבצי JSON
* ERROR in ./node_modules/worker-loader/dist/options.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "da...'
File was processed with these loaders:
./node_modules/url-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "da...'

הוספתי globalObject: 'this' ב webpack.config.js .
וכעת אין לי מושג איך להתקדם.
אודה מאד לכל כיוון שיכול לקדם אותי.
תודה רבה!

 

[Yehuda Kremer]

שלום

חסרונות בחבילה: react-pdf-to-image:

1. ישנה (שנתיים)
2. לא פופולרית
3. אין תיעוד מלא
4. והכי חמור - מצריך להשתמש בeject

כל החסרונות האלה לא קיימים בחבילה react-pdf,
חשוב לקרוא את ההוראות בדגש על standard browserify and others
react-pdf עובד מצוין (מניסיון)

 

[java]

שלום

חסרונות בחבילה: react-pdf-to-image:

1. ישנה (שנתיים)
2. לא פופולרית
3. אין תיעוד מלא
4. והכי חמור - מצריך להשתמש בeject

כל החסרונות האלה לא קיימים בחבילה react-pdf,
חשוב לקרוא את ההוראות בדגש על standard browserify and others
react-pdf עובד מצוין (מניסיון)

שים לב שהיא רוצה להציג כPDF אובייקט שהוא תמונה.
זה אפשרי בreact-pdf? (שסתם ככה היא ספריה מעולה...)

 

[סמרקט]

אשמח לעזרתכם.
אני מנסה להציג תמונה ששמורה כקובץ PDF, באפליקציה שיצרתי בריאקט.
ניסיתי להשתמש ב--react-pdf-to-image אבל קיבלתי שגיאה:
ERROR in ./node_modules/pdfjs-dist/webpack.js
Module not found: Error: Can't resolve 'worker-loader' in 'C:\react\‏‏


התקנתי את worker-loader ואז קיבלתי 11 שגיאות חדשות.
מתוכן:
* ERROR in ./node_modules/worker-loader/node_modules/schema-utils/src/validateOptions.js
...Module not found: Error: Can't resolve 'fs' in 'C: (למרות שהוספתי "fs": false, בpackage.json)
* ERROR in (webpack)/lib/node/NodeTargetPlugin.js
...Module not found: Error: Can't resolve 'module' in 'C:
ועוד שגיאה שחוזרת על עצמה 9 פעמים על קבצי JSON
* ERROR in ./node_modules/worker-loader/dist/options.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "da...'
File was processed with these loaders:
./node_modules/url-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "da...'

הוספתי globalObject: 'this' ב webpack.config.js .
וכעת אין לי מושג איך להתקדם.
אודה מאד לכל כיוון שיכול לקדם אותי.
תודה רבה!

מה גירסת ה-node שמותקנת אצלך?

 

[פרגית]

שים לב שהיא רוצה להציג כPDF אובייקט שהוא תמונה.
זה אפשרי בreact-pdf? (שסתם ככה היא ספריה מעולה...)

הפוך, אני רוצה להציג קובץ PDF כתמונה.

 

[פרגית]

שלום

חסרונות בחבילה: react-pdf-to-image:

1. ישנה (שנתיים)
2. לא פופולרית
3. אין תיעוד מלא
4. והכי חמור - מצריך להשתמש בeject

כל החסרונות האלה לא קיימים בחבילה react-pdf,
חשוב לקרוא את ההוראות בדגש על standard browserify and others
react-pdf עובד מצוין (מניסיון)

ניסיתי את השימוש בreact-pdf וגם בזה נתקלתי בשגיאות הנ"ל (בדיוק אותן שגיאות של react-pdf-to-image)

 

[סמרקט]

זה כנראה קשור לספרית הבסיס של שתיהן https://www.npmjs.com/package/pdfjs-dist

תנסי לראות ב-issues ב-github.
אולי זה יעזור?

pdf.js/examples/webpack/README.md at master · mozilla/pdf.js

PDF Reader in JavaScript. Contribute to mozilla/pdf.js development by creating an account on GitHub.

github.com

 

[פרגית]

ניסיתי את השימוש בreact-pdf וגם בזה נתקלתי בשגיאות הנ"ל (בדיוק אותן שגיאות של react-pdf-to-image)

ניסתי שוב את react-pdf.
הבעיה שנוצרת לי-
בכל פעם שאני מבצעת npm run build לפרוייקט, הוא יוצר לי תיקייה של docs (כמו build) ובתוכה static שמכילה תיקיות js וcss.
כשאני מוסיפה את react-pdf הוא לא יוצר לי את תיקיית static אלא שם לי את כל הקבצים ישר בdosc.
מה שגורם לי בעיה כשאני מעלה את הקבצים לצד הserver,
אני חייבת להפריד את קובץ הindex.html מקבצי הjs.
ואז אני מקבלת שגיאה 404 שדף הjs לא נמצא.
מקווה שהובנתי.

ותודה רבה לכל הנחלצים לעזרתי!!

 

[פרגית]

אשמח לעזרתכם.

 

[Yehuda Kremer]

קודם כל הערת ביניים: אם בוצע "reject" תוך כדי הניסיונות האלה, שווה לחזור אחרונה לגרסה מוקדמת שלא בוצעה בה "reject".

לשאלה האחרונה:
ממה שאני מכיר, אין קשר בין react-pdf לבין מיקום קבצי הbuild.
שווה לבדוק האם:

• שינו את ההגדרות הדיפולטיות בקובץ webpack.config.js היכן ימוקמו קבצי הbuild
• הגדירו שיבוצע build לקובץ יחיד במקום למספר קבצים

מצ"ב קובץ webpack.config.js שאיתו + react-pdf, כן נשמרים הקבצים לתיקיית static כצפוי,
אפשר למצוא ע"י חיפוש הטקסט "static", ולבצע השוואה בינו לבין webpack.config.js שלכם.

 

[פרגית]

קודם כל הערת ביניים: אם בוצע "reject" תוך כדי הניסיונות האלה, שווה לחזור אחרונה לגרסה מוקדמת שלא בוצעה בה "reject".

לשאלה האחרונה:
ממה שאני מכיר, אין קשר בין react-pdf לבין מיקום קבצי הbuild.
שווה לבדוק האם:

• שינו את ההגדרות הדיפולטיות בקובץ webpack.config.js היכן ימוקמו קבצי הbuild
• הגדירו שיבוצע build לקובץ יחיד במקום למספר קבצים

מצ"ב קובץ webpack.config.js שאיתו + react-pdf, כן נשמרים הקבצים לתיקיית static כצפוי,
אפשר למצוא ע"י חיפוש הטקסט "static", ולבצע השוואה בינו לבין webpack.config.js שלכם.

תודה רבה על התשובה המפורטת! אני אנסה בעז"ה ויעדכן.

 

[פרגית]

קודם כל הערת ביניים: אם בוצע "reject" תוך כדי הניסיונות האלה, שווה לחזור אחרונה לגרסה מוקדמת שלא בוצעה בה "reject".

לשאלה האחרונה:
ממה שאני מכיר, אין קשר בין react-pdf לבין מיקום קבצי הbuild.
שווה לבדוק האם:

• שינו את ההגדרות הדיפולטיות בקובץ webpack.config.js היכן ימוקמו קבצי הbuild
• הגדירו שיבוצע build לקובץ יחיד במקום למספר קבצים

מצ"ב קובץ webpack.config.js שאיתו + react-pdf, כן נשמרים הקבצים לתיקיית static כצפוי,
אפשר למצוא ע"י חיפוש הטקסט "static", ולבצע השוואה בינו לבין webpack.config.js שלכם.

עזר לי מאד והתקדמתי.
אשמח לשמוע האם הקובץ xxx.worker.js ממוקם אחרי הbuild ביחד עם הקובץ index.html?
והאם ידוע לך אם ניתן להגדיר היכן הוא ימוקם?

 

[Yehuda Kremer]

היכן הקובץ "pdf.worker.js" ימוקם זו החלטה שלך.

אם אפשרי, כדאי להשתמש בCDN, הוראות איך מופיעות כאן: standard-browserify-and-others

אם החלטתם להשתמש בקובץ המקומי אז חשוב להשתמש דווקא בגרסה הממוזערת שלו "pdf.worker.min.js" שקטנה במחצית מהקובץ הרגיל.

לגבי המיקום, אני חושב שמתאים למקמו בתיקיית ב: "build\static\js" מפני שהוא מסוג js, אסביר איך:

1. יש ליצור תיקייה בשם js במיקום הבא: "public\static\js"
2. ולהעתיק אליה ידנית את הקובץ "node_modules\react-pdf\node_modules\pdfjs-dist\build\pdf.worker.min.js"
3. בקובץ "public\index.html" לשים את התגית:

<script src="static/js/pdf.worker.min.js"></script>

ממש לפני:

</body>

 

[פרגית]

יש ליצור תיקייה בשם js במיקום הבא: "public\static\js"

אין לי תיקיית Public, לא יצרתי את הפרוייקט כ create-react-app.


נשארתי עם השגיאה

גם אחרי שאני מתקינה את cors.
(אצלי בlocal התקנתי את התוסף Moesif Orign וזה הסתדר לי.)

האם זה חסימת אבטחה?
יש מה לעשות עם זה?