CODEWITHSUNDEEP
javascriptreactjs
iamrkcheers
iamrkcheers

Reputation: 413

Load more than 1 pdf pages in '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. 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.

Upvotes: 15

Views: 28656

Answers (5)

Jyoti Prakash
Jyoti Prakash

Reputation: 1

 <Document
              file={pdf1}
              onLoadSuccess={({ numPages }) => {
                extractText(pdf1, setPdf1Text);
                setTotalPages1(numPages);
              }}
            >
              {Array.from(new Array(totalPages1 || 0), (el, index) => (
                <Page
                  key={`page_${index + 1}`}
                  pageNumber={index + 1}
                  renderTextLayer={true}
                  renderAnnotationLayer={false}
                />
              ))}
            </Document>

Try this method . First of all get the number of pages and store it in a state variable.

Upvotes: 0

stefan milic
stefan milic

Reputation: 21

this is for PDFs when you know the number of pages in advance

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

Upvotes: 2

Rex Osariemen
Rex Osariemen

Reputation: 199

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 with a next button to navigate to additional pages.

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

Upvotes: 3

ritz
ritz

Reputation: 5706

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>

Upvotes: 31

Stanley Cheung
Stanley Cheung

Reputation: 958

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>

Upvotes: 11

Related Questions