Rendu de PDF statique à partir de reactJS en utilisant react-pdf

Question

Voici mon code. Webpack charge le PDF correctement. Le composant de réaction ne rend pas le pdf. Lors de l'accès via le composant de réaction, il apporte une page blanche avec le numéro de page. 1 de Lorsque vous placez l'url suivant dans le navigateur, il rend directement le pdf du navigateur et va bien.

http://localhost:3000/bfa955d1b47a762fb2b4d8cc2525f637.pdf

import React, {Component} from "react"; 
import myPdf from '../images/BSOAANZChapterConstitution.pdf' 
import {Document, Page} from 'react-pdf/build/entry.webpack'; 

class Constitution extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      numPages: null, 
      pageNumber: 1 
     }; 
    } 

    onDocumentLoad({numPages}) { 
     this.setState({numPages}); 
    } 

    render() { 

     const {pageNumber, numPages} = this.setState; 
     return (
      <div> 
       <Document 
        file={myPdf} onLoadSuccess={this.onDocumentLoad}> 
        <Page pageNumber={pageNumber}/> 
       </Document> 
       <p>Page {pageNumber} of {numPages}</p> 
      </div> 
     ); 
    } 
} 

export default Constitution; 

Answer 1

Je pense que la question est juste à cause de ne pas lier gestionnaire d'événements this.onDocumentLoad à this. Si vous souhaitez accéder aux propriétés, états et méthodes de composants comme setState des gestionnaires d'événements, vous devez lier ce gestionnaire à this. Ainsi, dans le constructeur ajouter ce qui suit.

this.onDocumentLoad = this.onDocumentLoad.bind(this)

Answer 2

I a ajouté la ligne mentionnée dans la proposition ci-dessus. Ça marche. J'ai aussi essayé quelques autres paquets, ils ne fonctionnent pas. C'était le même problème, pas d'erreurs mais le pdf n'était pas chargé.
Je l'ai fonctionné maintenant en utilisant rea-pdf-js-infinite, je ne suis pas sûr si elle permet également les contrôles de navigation et les numéros de page. Mais jusqu'à présent, il rend au moins le pdf.

react-pdf-infinite Le code était juste une importation et une spécification de fichier.

class Constitution extends Component { 
    render() { 
     return (
      <PDF file={myPdf} scale={1.5} /> 
     ); 
    } 
} 

export default Constitution;