javascript - 在 'react-pdf' 中加载超过 1 个 pdf 页面

Question

我正在用 React 构建一个具有显示 pdf 功能的项目。我正在使用示例(在 repo 中)本身提供的基本最少代码。但是，代码仅显示 pdf 的第一页，其余部分将被忽略。我为此使用“react-pdf”。我

以下是我的代码..

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

请帮忙。谢谢。

Answer 1

如果页面总数未知，则呈现所有页面的更通用方法...

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>