1 votes

Problem with react-pdf when trying to run the project it comes out Failed to load PDF file

I have tried to run the following code but I have not been able to read the PDF with the react CLI, I hope you can help me, I leave the information:

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
// import 'react-pdf/dist/Page/AnnotationLayer.css';
class Pdf extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
    file: '../../public/test.pdf'
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages, file } = this.state;

    return (
        <Document
          file={file}
        />
    );
  }
}
export default Pdf;

This is my package.json:

{
 "name": "leer-pdf",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "react": "^16.5.2",
   "react-dom": "^16.5.2",
   "react-pdf": "3.0.5",
   "react-scripts": "1.1.5"
 },
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
 },
  "devDependencies": {
   "copy-webpack-plugin": "^4.5.2"
  }
}

What I get on the page and the network

introducir la descripción de la imagen aquí

The error it generates:

introducir la descripción de la imagen aquí

0voto

I think the problem is this file="test.pdf" try changing it to file="./test.pdf" .

If you have a file structure like this:

  • src
    • App.js
    • components
      • Pdf.js
      • test.pdf
  • public
    • bundle.js

Then you need to move test.pdf to the folder public as follows:

  • src
    • App.js
    • components
      • Pdf.js
  • public
    • bundle.js
    • test.pdf

Because when your compiled code is executed from public/bundle.js y bundle.js does not know how to reach src/components/test.pdf in the file system.

There may also be a difference between the production/development environment if you are using webpack y webpack-dev-server

See the example of react-pdf . It has a flat file structure. That's why it works.

enter image description here

Source

You could also declare your file in the state as follows:

class Pdf extends Component {
 state = {
  numPages: null,
  pageNumber: 1,
  file: './test.pdf'
}

and call it in the render like this:

render() {
   const { pageNumber, numPages, file } = this.state;

    return (
      <Document
        file={file}
      />
  );
}

0 votes

David thank you very much for the answer, I moved the file to the public folder as you said and it is now with the following read path: state = { numPages: null, pageNumber: 1, file: '../../public/test.pdf' } However it still does not work. It gets the same error.

0 votes

The other thing is that I am working with the react CLI, I don't know if I can modify the webpack from there, should I upload the default webpack code?

0voto

Johan Inglorion Points 60

The solution to this problem in case someone has the same problem is:

  1. Make a clone sample from the following path and study the sample code:

    • https://github.com/wojtekmaj/react-pdf/tree/master/sample/parcel .
    • You stop in the cmd or terminal and install the dependencies yarn install or npm install.
    • you run it with yarn start or npm start.

      1. My mistakes were the following:
    • The files that are imported img or pdf, to load them in the components, are placed inside the SRC folder not outside. And they are imported in this way

      import sample from './sample.pdf';

-A method must be implemented for the component in the onLoadSuccess event, the method is in charge of counting the number of pages.

  • It is necessary to implement a script that is passed as a child property that allows to go through the amount of pages that has the PDF to the component something like this:

    import React, { Component } from 'react'; import { Document, Page } from 'react-pdf'; import test from './sample.pdf'; // import 'react-pdf/dist/Page/AnnotationLayer.css';

    const options = { cMapUrl: 'cmaps/', cMapPacked: true, }; class Pdf extends Component { state = { numPages: null, pageNumber: 1, file: test }

    onDocumentLoadSuccess = ({ numPages }) => { this.setState({ numPages }); }

    render() { const { pageNumber, numPages, file } = this.state;

    return (
      <Document file={file} onLoadSuccess={this.onDocumentLoadSuccess} options={options}>
        {
                Array.from(
                  new Array(numPages),
                  (el, index) => (
                    <Page
                      key={`page_${index + 1}`}
                      pageNumber={index + 1}
                    />
                  ),
                )
        }
      </Document>
    );

    } } export default Pdf;

IF YOU HAVE ANOTHER COMPONENT TO RECOMMEND THAT HAS TO DO WITH PDF I WOULD BE VERY GRATEFUL, IF YOU KNOW OF FEATURES SUCH AS ZOOM OR OTHERS THAT CAN BE APPLIED TO THIS COMPONENT I WOULD APPRECIATE IT.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X