Problem with react-pdf when trying to run the project leaves Failed to load PDF file

Question

Problem with react-pdf when trying to run the project leaves Failed to load PDF file

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have tried to run the following code but I have not managed to read the PDF with the Reaction 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 brings me out on the page and the network

The error it generates:

javascript reactjs npm jspdf react

asked by Johan Inglorion 02.10.2018 в 07:00

source

2 answers

MYSQL SELECT DISTINCT query does not work in MYSQL 5.7.21 Can you pass a bean per post to the servlet?

score 0 · Answer 1

I think the problem is this file="test.pdf" , try to change 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 public folder like this:

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

Because when your compiled code is executed from public/bundle.js and bundle.js you do 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 and webpack-dev-server

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

Source

You could also declare your file in state like this:

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}
      />
  );
}

score 0 · Answer 2

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

Have a clone sample from the following path and study the sample code:

link .
You stop at the cmd or terminal and install the dependencies yarn install or npm install.
you run it with yarn start or npm start.
My mistakes were as follows:
The files that are imported img or pdf, to load them into the components, are placed inside the SRC folder not outside. And they are imported in this way

import sample from './sample.pdf';

-It must implement a method for the component in the onLoadSuccess event, the method is responsible for counting the number of pages

You have to implement a script that is passed as a child property that allows you to traverse the number of pages that the PDF has 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 YOU HAVE TO DO WITH PDF YOU WOULD THANK THEM A LOT, IF THEY KNOW ABOUT FUNCTIONALITIES AS A ZOOM OR OTHER THAT CAN BE APPLIED TO THIS COMPONENT, THANK YOU