-
-
Notifications
You must be signed in to change notification settings - Fork 901
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Failed to load PDF file #321
Comments
|
I have a very similar (simple) App.js - as per your description - and not able to load a PDF document. Getting the following errors:
|
@saadpasta @MichaelBlanchet I reckon you are using create-react-app as a boilerplate ? Add/change these to your code import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; as instructed on the main page of this project. Also make sure pdf file is to be found for your project (public directory) |
See #52 |
I had similar issue, in my case it was incorrect file to be loaded
in my localhost dev the path was calculated relative to the current route not the root, but local web server instead of responding with In the network tab it was showing as When I've modified the path to be as |
Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined". link to codesandbox. |
@jtibrewal09 #52 might help you, sounds like a worker issue. |
I'm closing this issue to give other issues more visibility. If you still need assistance with this matter, please do not hesitate to reply and I'll reopen. Happy coding! |
I see that using resolved the issue: "Failed to load PDF file." |
I am using base64 string, But still it says : "Setting up fake worker failed: "Loading chunk 0 failed" |
Hope this command helps someone. In create-react-app, the instructions for this libs say:
If your build process uses cli commands, (i.e. aws buildspec), you can use this:
|
Using https in front of the url seems to resolve the problem for me: pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; |
works well for me. |
Same problem. Two small pdfs that open fine in viewers. One hangs loading and the other (after adding onLoadError={console.error} switched from hanging on 'Loading PDF' to displaying "Failed to load PDF file" with
in the console window. I don't need workers - the files are only a few MB each. |
@pwhipp You do need workers - PDF.js no longer works properly without them, so neither does React-PDF. If you don't want to use external worker, you can also manually copy PDF.js worker to your build folder & set |
Thanks. After many hours (webpack paths seem to make getting worker loading working properly crazy and I only need them to present a couple of little pdfs) I gave up and used the simpler but more limited https://github.com/ansu5555/pdf-viewer-reactjs. I will come back to this if I have some other need that forces us to start using workers. |
Note: This comment previously said that we can totally do what pdf-viewer-reactjs is doing, which was technically true, but here's why you shouldn't: In pdf-viewer-reactjs, they import Worker like this: import pdfjs from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; Unfortunately, this module exports nothing and consequently works as if you didn't set workerSrc at all. This is invalid, causes an error and a "fake" worker to be loaded. This is a behavior that's no longer supported because of performance issues that loading "fake" worker causes and is highly discouraged by pdf.js team. |
Yes, thanks. They just did it out of the box. |
Thank you sooooo much for the solution! Same issue and same solution here! |
Display pdf in Contact.jsx ok! ==> display fixed with : pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; wojtekmaj/react-pdf#321 (comment)
Sorry - I noticed something and had to edit my comment above. What ansu5555/pdf-viewer-reactjs is doing is actually wrong and will harm your application's performance. |
For these that use CRA, and do not want to use CDN, as is my case, you can perform following steps:
This solution would work for both npm build and npm start commands (CRA already existing scripts). |
aside from importing via cdn and the solution of @nevres , is there other way to just simply import the worker? |
Thanks buddy, I was going crazy, this worked for me!! |
Failed to open PDF fixed, but now it's showing InvalidPDFException: |
If you're using craco, you can add a webpack rule to create the worker as a separate chunk. Then you can import it and assign it to // craco.config.js
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /pdf\.worker\.js/,
loader: "file-loader",
options: {
name: "static/js/[name].[hash:8].[ext]",
},
},
],
},
},
},
}; import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; |
@jzskca I actually love your solution here. Experimented with it in #756. I think after the changes create-react-app should be able to use webpack specific entry file just fine. Please kindly check react-pdf |
This worked for me with Webpack 5 and react-pdf 5.7.2:
|
Hi, i am facing a similar issue but i dont have a file in the repo structure. Instead i am upload a file using input element file. I have the file object throught he file handler. When i feed that file by doing URL.createObjectURL(fileObject) ... i am getting that error. |
Please advise what I am missing here it is not working at all. The error is Failed to load PDF file.
|
yes it worked for me |
This worked for me. The issue occurred with the Codesandbox react typescript template. |
@saadhashmi please what do i do i if I wanted to load the PDF that doesnt exist on my file structure but a file on the internet like this one: https://www.africau.edu/images/default/sample.pdf This is what my code currently looks like: <Document onLoadError={console.error} file="https://www.africau.edu/images/default/sample.pdf" onLoadSuccess={() => {console.log("ok")}}> |
@codiejay Looks like you may be dealing with what's explained in FAQ: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions#when-im-trying-to-load-a-pdf-file-from-an-external-source-im-given-a-message-failed-to-load-pdf-file |
Hi @wojtekmaj i have a protected pdf file but the password has a |
I followed this example. I only replaced "copy-pdfjs-worker" with "prebuild" and it worked.
Then used it like this:
EDIT: I disabled the prebuild script above and manually copied pdf.worker.js to the public directory, and it still works. I'm a bit confused, why it is suggested that we need to copy it to public directory only during the build process? As copying it manually before also seems to work. What am I missing here? Thanks. |
You're not missing anything. Doing this before/after/during build is the safest best. What else could you hook it to? |
worked perfectly! thanks |
For CRACO, I used the version:
|
I just tried this but error 404, i solved this error using jsdlivr pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs` |
That's because "pdf.worker.js" changed to "pdf.worker.min.mjs" in the recent React-PDF update. |
Hi, you can do it this way: The issue occurs because, in React, files in the public folder should be referenced directly as relative URLs, without using import. Instead of:
You can simply use a relative URL in the downloadPDF function:
This way, React won't attempt to resolve the path dynamically, and it will directly fetch the file from the public folder. |
i am having trouble showing pdf file tried every way from importing as file and directory giving path it is giving an error Failed to load PDF file. And When I am using webpack or parcel it just showing loading PDF.
Code
Folder Structure
The text was updated successfully, but these errors were encountered: