使用react-pdf从reactJS渲染静态PDF
使用react-pdf从reactJS渲染静态PDF
提问于 2017-10-21 06:52:16
这是我的代码。Webpack可以加载PDF了。react组件不呈现pdf。当通过react组件访问时，它会显示一个带有第1号页面的空白页面，当将以下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;回答 2
Stack Overflow用户
发布于 2017-10-21 07:39:13
我认为这个问题只是因为没有将this.onDocumentLoad事件处理程序绑定到this。如果要从事件处理程序访问属性、状态和组件方法(如setState )，则需要将该处理程序绑定到this。因此，在构造函数中添加以下内容。
this.onDocumentLoad = this.onDocumentLoad.bind(this)
Stack Overflow用户
发布于 2017-10-24 04:49:17
我添加了上面建议中提到的那一行。它对工作很有帮助。我也试过其他几个包，它们都不起作用。这是同样的问题，没有错误，但pdf没有被加载。
我现在通过使用react-pdf-js-infinite让它工作，我不确定它是否也允许导航控件和页码。但到目前为止，它至少呈现了pdf。
react-pdf-infinite代码只是一种导入和文件规范。
class Constitution extends Component {
render() {
return (
<PDF file={myPdf} scale={1.5} />
);
}
}
export default Constitution;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46858352
复制相关文章
相似问题
腾讯云开发者
