react-pdf: Failed to load PDF file
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
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Document, Page } from 'react-pdf'
import lesson2 from './lesson2.pdf'
class App extends Component {
state = { numPages: null, pageNumber: 1 };
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
};
goToPrevPage = () =>
this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
goToNextPage = () =>
this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
render() {
const { pageNumber, numPages } = this.state;
return (
<div>
<nav>
<button onClick={this.goToPrevPage}>Prev</button>
<button onClick={this.goToNextPage}>Next</button>
</nav>
<div style={{ width: 600 }}>
<Document
file={lesson2}
onLoadSuccess={this.onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} width={600} />
</Document>
</div>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
}
}
export default App;
Folder Structure
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 40 (11 by maintainers)
@saadpasta @MichaelBlanchet I reckon you are using create-react-app as a boilerplate ?
Add/change these to your code
as instructed on the main page of this project. Also make sure pdf file is to be found for your project (public directory)
I have a very similar (simple) App.js - as per your description - and not able to load a PDF document. Getting the following errors:
Using https in front of the url seems to resolve the problem for me:
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:
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.
works well for me.
@ajbee07
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
workerSrc, and avoid using a CDN-hosted version.For these that use CRA, and do not want to use CDN, as is my case, you can perform following steps:
Create script within package.json: “copy-pdfjs-worker” : “cp ./node_modules/pdfjs-dist/build/pdf.worker.js public/scripts” Here we copy from node modules into public/scripts folder. During the build this folder would be copied into build folder. This script is manually triggered.
And register it as follows: pdfjs.GlobalWorkerOptions.workerSrc =
${process.env.PUBLIC_URL}/scripts/pdf.worker.js;This solution would work for both npm build and npm start commands (CRA already existing scripts).
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:
mkdir -p build && cp ./node_modules/pdfjs-dist/build/pdf.worker.js buildI 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
404it was returning the index.html content which couldnt be parsed 😃In the network tab it was showing as
sample.pdfwhich was confusing, but looking at response content disclosed that it was in fact a web page not PDF.When I’ve modified the path to be as
const path = '/data/sample.pdf'it all started to work.onLoadError={console.error}to see additional messagesFailed to open PDF fixed, but now it’s showing InvalidPDFException: InvalidPDFException {message: “Invalid PDF structure.”, name: “InvalidPDFException”} Anyone knows how to fix it??
I see that using componentDidMount() { pdfjs.GlobalWorkerOptions.workerSrc =
//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js; }resolved the issue: “Failed to load PDF file.”
@MichaelBlanchet
See #52
This worked for me. The issue occurred with the Codesandbox react typescript template.
@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
v5.3.0-beta.2and let me know how it goes!@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
pdfjs.GlobalWorkerOptions.workerSrcto point at it.