「react-pdf」にpdfページを1つ以上ロード

Question

私はReactでpdfsを表示する機能を持つプロジェクトを構築しています。 私は、（repo内の）例で提供されている基本最小コードを使用しています。 しかし、コードはpdfの最初のページのみを表示し、残りは無視されます。これに「react-pdf」を使用しています。 I

次のヘルプしてください

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で表示されるページを制御できます。例えば

ですから、総ページNUMを知っていれば、あなただけのループにより、PDF内のすべてのページを表示するためのより多くの<Page />コンポーネントを追加することができ、単にコピーして、過去の

<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>