I am new new to react, I am trying to display a pdf file on browser. I am getting an error as failed to load PDF. I am trying to run the sample program given in https://www.npmjs.com/package/react-pdf.
App.js
import React, { Component } from 'react';import { Document, Page } from 'react-pdf'; class MyApp extends Component {state = {numPages: null,pageNumber: 1,}onDocumentLoad = ({ numPages }) => {this.setState({ numPages });}render() {const { pageNumber, numPages } = this.state;return (<div><Documentfile="./1.pdf"onLoadSuccess={this.onDocumentLoad}><Page pageNumber={pageNumber} /></Document></div>);}}export default MyApp;index.js
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root'));registerServiceWorker();Error screenshot
Best Answer
Question is old but hope this help someone. I faced this issue and found a solution here https://github.com/wojtekmaj/react-pdf/issues/321.
import { Document, Page, pdfjs } from 'react-pdf';
Add this to your constructor.
constructor(props){super(props);pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;}You load the file using file="./1.pdf" I believe that might be the problem.
If you have a file structure like:
- src
- App.js
- components
- ShowPdfComponent.js
- 1.pdf
- public
- bundle.js
Then you need to move the 1.pdf to public folder like this:
- src
- App.js
- components
- ShowPdfComponent.js
- public
- bundle.js
- 1.pdf
Because when your compiled javascript code is being executed from public/bundle.js and bundle.js does not know how to get to src/components/1.pdf in file system.
There might be also a difference between production/development environment if you are using webpack and webpack-dev-server.
Look at react-pdf example. It has flat file structure. That is the reason why it works.
if you are using create-react-app then you need to import differently like
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'because it uses webpack under the hood.
Here is the minimum setup you need to be able to display your pdf in react TypeScript:
import { Document, Page, pdfjs } from 'react-pdf'pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;const YourComponentReact = ({url}: {url: string}) => {return (<Document file={url}><Page pageNumber={1} /></Document>)}You can add a quick button if you want to be able to change pagesYou only need to download react-pdf and @types/react-pdf if you use typescript.
To work with react-pdf with webpack use below snippet.
import { Document, Page, pdfjs } from "react-pdf";pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;You can import the pdf file using import samplePdf from './1.pdf' and can use directly like file={samplePdf} in your Document tag.
adding pdfjs to import and using it like this hellped
import { Document, Page, pdfjs } from 'react-pdf'pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;in the same file i need to show my pdf