Load more than 1 pdf pages in 'react-pdf'

user_6325934 0
Viewed 14859

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. am using 'react-pdf' for this. I

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.

reactjs javascript
3 Answers

A more generic way to render all pages if total number of pages is not known...

const [numPages, setNumPages] = useState(null);
.
.
.
<Document
    file={data}
    onLoadSuccess={({ numPages })=>setNumPages(numPages)}
>
    {Array.apply(null, Array(numPages))
    .map((x, i)=>i+1)
    .map(page => <Page pageNumber={page}/>)}
</Document>
user_59229220

Due to this project still in development, not very clear document to show how to show all pages, but there's a pageNumber attribute inside <Page /> for you to control the page that showing on PDF.

So if you know the total page num, you can just add more <Page /> component for displaying all page in pdf by looping of just copy and past

e.g.

<Document
    file={data}
    onLoadSuccess={this.onDocumentLoad}>

        // Showing page 1,2,3,10,11,12
        {[1,2,3,10,11,12].map(page => (
            <Page pageNumber={page} />
        ))}

</Document>
user_60639030

I am leaving this here for those that want to implement navigation on their pdf display. You may want to display a single page at a time.

import React, { useState } from 'react';
import { Document, Page, } from 'react-pdf/dist/esm/entry.webpack';
import { Button, } from '@amzn/awsui-components-react'; //You can use html button here or your favorite library

export function PDFComponent({ pdfFile }: any) {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState(1);
  const [renderNavButtons, setRenderNavButtons] = useState<Boolean>(false);
  const onSuccess = (sample: any) => {
    alert('PDF document loaded successfully!');
    setPageNumber(1);
    setRenderNavButtons(true);
  }

  const changePage = (offset: number) => {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }
  const previousPage = () => { changePage(-1); }
  const nextPage = () => { changePage(+1); }
  return (
    <>
      <div>
        <Document
          file={pdfFile}
          onLoadSuccess={({ numPages }) => {
            setNumPages(numPages);
            setRenderNavButtons(true);
            onSuccess;
          }}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      </div>

      {renderNavButtons &&
        <div className="buttonc">
          <Button
            disabled={pageNumber <= 1}
            onClick={previousPage}
            variant='primary'
          >
            Previous Page
          </Button>
          {"  "}
          <Button
            disabled={pageNumber === numPages}
            onClick={nextPage}
            variant='primary'
          >
            Next Page
          </Button>
        </div>}
    </>
  )
}

user_16181650
Related