Question

我正在React中构建一个具有显示pdf功能的项目。我正在使用示例中提供的基本最小代码（在repo中）。但是，代码仅显示pdf的第一页，其余部分将被忽略。我正在使用＆＃39; react-pdf＆＃39;为了这。我

以下是我的代码..

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

由于此项目仍在开发中，不是非常清晰的文档显示如何显示所有页面，但pageNumber内有<Page />属性，您可以控制显示的页面PDF。

因此，如果你知道页面总数，你可以添加更多<Page />组件，通过循环复制和过去来显示pdf中的所有页面

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>

Answer 2

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

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>

在＆＃39; react-pdf＆＃39;中加载超过1个pdf页面

2 个答案: