使用react-pdf渲染来自reactJS的静态PDF

Question

这是我的代码。 Webpack加载PDF版本。反应组件不会呈现PDF。当通过反应组件访问时，它带来了一个页面没有页面的空白页面。 1 of 当在浏览器中放置以下URL时，它直接呈现来自浏览器的pdf，并且没问题。

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

我认为这个问题是仅仅因为this.onDocumentLoad事件处理程序不结合this。如果您想访问属性，状态和组件方法（如事件处理程序中的setState），则需要将该处理程序绑定到this。因此，在构造函数中添加以下内容。

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

Answer 2

我添加在上述建议中提到的线。它力求工作。我也尝试了其他一些软件包，他们没有工作。这是同样的问题，没有错误，但没有加载PDF。
我现在通过使用react-pdf-js-infinite工作，我不确定它是否也允许导航控件和页码。但到目前为止，它至少可以呈现pdf。

react-pdf-infinite 代码只是一个导入和文件规范。

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

export default Constitution;