React-pdf: Load more than 1 pdf pages

Created on 10 Nov 2017 · 6Comments · Source: wojtekmaj/react-pdf

I am building a project in React that has a functionality of displaying pdfs.
I am using the basic minimal code provided in the example (in the repo) itself.
However, the code displays only the first page of the pdf and the rest are ignored.

Following is my code ..


import React, {Component} from 'react';
import './DocumentationPage.css';
import HeaderComponent from '../../components/Header/Header.js';
import { Document, Page } from 'react-pdf/build/entry.webpack';
import data from './data.pdf';
// import { Document, Page } from 'react-pdf';

export default class DocumentationPage extends Component {
    state = {
        numPages: 12,
        pageNumber: 1,
      }

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

        return (
            <div>
                <HeaderComponent id='header' location={this.props.location} />
                <div>
                    <h1>Documentation</h1>
                </div>
                <div id='contentDiv'>
                    <Document
                        file={data}
                        onLoadSuccess={this.onDocumentLoad}>
                            <Page pageNumber={pageNumber} />
                    </Document>
                    <p>Page {pageNumber} of {numPages}</p>
                </div>
            </div>
        );
    }
}

Please help.
Thank You.

question

Source

iamrkcheers

Most helpful comment

Well, you've put one <Page> inside <Document>. Therefore, you got one page. ;) Please see ./sample directory for a simplest possible example of dynamic rendering of multiple pages.

wojtekmaj on 10 Nov 2017

👍2

All 6 comments

Well, you've put one <Page> inside <Document>. Therefore, you got one page. ;) Please see ./sample directory for a simplest possible example of dynamic rendering of multiple pages.

wojtekmaj on 10 Nov 2017

👍2

Yup, silly me !
Anyway, thanks for the help.

iamrkcheers on 11 Nov 2017

Pleasure! If you need help with anything else, let me know.

wojtekmaj on 11 Nov 2017

Well, you've put one <Page> inside <Document>. Therefore, you got one page. ;) Please see ./sample directory for a simplest possible example of dynamic rendering of multiple pages.

as I saw in sample I have to add all the pages handy to see all pages. is there other way to load all pdf? I think there should be a way that pdf-react handle this. for example load all pages if we don;t use