javascript - Getting error when displaying a PDF file using react-pdf - Stack Overflow

admin管理员组

文章数量:1399509

I integrated the file uploader from the base UI and tried to display the uploaded file using react-pdf package. I tried converting the file as Blob and then uploaded it with the below code

const test = new Blob([file], { type: "application/pdf" });
    const fileURL = URL.createObjectURL(test);

Instead, I tried directly assigning the uploaded file to the Document tag but getting that file prop is accepting string instead received file type.

I tried using the file reader also but was unable to achieve it

Below is my code sandbox link:- =/src/example.js:1712-1820

can anyone please help me in getting this issue resolved

And one more thing which i noticed is in the onLoadError prop was getting the below err

Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler'

I integrated the file uploader from the base UI and tried to display the uploaded file using react-pdf package. I tried converting the file as Blob and then uploaded it with the below code

const test = new Blob([file], { type: "application/pdf" });
    const fileURL = URL.createObjectURL(test);

Instead, I tried directly assigning the uploaded file to the Document tag but getting that file prop is accepting string instead received file type.

I tried using the file reader also but was unable to achieve it

Below is my code sandbox link:- https://codesandbox.io/s/base-web-file-uploader-basic-usage-forked-z8zpkr?file=/src/example.js:1712-1820

can anyone please help me in getting this issue resolved

And one more thing which i noticed is in the onLoadError prop was getting the below err

Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler'

• javascript
• html
• reactjs
• react-pdf
• react-pdf-viewer

Share Improve this question Follow edited Aug 12, 2022 at 12:35 Abhinav Veramosu asked Aug 12, 2022 at 11:28 Abhinav VeramosuAbhinav Veramosu 5311 gold badge11 silver badge44 bronze badges 3

• 2 You have to add cdn for the worker... it would help u... stackoverflow./questions/65955980/… this issue was also closed on github.. github./wojtekmaj/react-pdf/issues/321 – sms Commented Aug 12, 2022 at 12:40
• I added the cdn now i am getting a different error at BaseExceptionClosure (hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/…) at Object.eval (hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/…) at w_pdfjs_require (hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/…) I updated the sandbox also codesandbox.io/s/… – Abhinav Veramosu Commented Aug 12, 2022 at 12:58
• 1 Got the issure resolved . Sandbox link:-codesandbox.io/s/… – Abhinav Veramosu Commented Aug 17, 2022 at 5:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

import the library from an alternetive folder, and add pdf worker using cdn:

import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg./pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

works for me

What worked for me was:

1. Copy node_modules/pdfjs-dist/build/pdf.worker.js to public/pdf.worker.js
2. options={{workerSrc: "pdf.worker.js"}} Add this props inside the Document ponent from react-pdf

本文标签： javascriptGetting error when displaying a PDF file using reactpdfStack Overflow