Rendering static PDF from reactJS using react-pdf

Question

Here is my code. Webpack loads the PDF alright. The react component does not render the pdf. When accessing through the react component it brings a blank page with page no. 1 of When put the following url in the browser it renders the pdf from browser directly and is alright.

http://localhost:3000/bfa955d1b47a762fb2b4d8cc2525f637.pdf

import React, {Component} from "react";
import myPdf from '../images/BSOAANZChapterConstitution.pdf'
import {Document, Page} from 'react-pdf/build/entry.webpack';

class Constitution extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numPages: null,
            pageNumber: 1
        };
    }

    onDocumentLoad({numPages}) {
        this.setState({numPages});
    }

    render() {

        const {pageNumber, numPages} = this.setState;
        return (
            <div>
                <Document
                    file={myPdf} onLoadSuccess={this.onDocumentLoad}>
                    <Page pageNumber={pageNumber}/>
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
    }
}

export default Constitution;

Do you see any error in the console?

user-developer
– user-developer

2017-10-20 23:26:33 +00:00
Commented Oct 20, 2017 at 23:26 — user-developer
– user-developer, Commented Oct 20, 2017 at 23:26

user-developer · Accepted Answer · 2017-10-21 11:46:52Z

1

I think the issue is just because of not binding this.onDocumentLoad event handler to this. If you want to access properties, state and component methods like setState from event handlers, you need to bind that handler to this. So, within the constructor add the following.

this.onDocumentLoad = this.onDocumentLoad.bind(this)

edited Oct 21, 2017 at 11:46

answered Oct 20, 2017 at 23:39

user-developer

5864 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kavitha · Accepted Answer · 2017-10-23 20:49:17Z

I added the line mentioned in the above suggestion. It dint work. I tried a few other packages too, they din't work. It was the same problem, no errors but pdf was not being loaded.
I got it working now by using react-pdf-js-infinite, I am not sure if it also allows navigation controls and page numbers. But so far, it at least renders the pdf.

react-pdf-infinite Code was just one import and file specification.

class Constitution extends Component {
   render() {
        return (
            <PDF file={myPdf} scale={1.5} />
        );
    }
}

export default Constitution;

Collectives™ on Stack Overflow

Rendering static PDF from reactJS using react-pdf

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related