试过好几个PDF预览插件,可能是太笨,官方文档看不懂, 一开始我以为直接require(“动态地址”)就ok,但是只能引入静态的PDF文件,后来直接把返回的文件在后台转换成base64格式,set进一个字段,前台PDF插件内的 file={“data:application/pdf;base64,”+this.props.datum.base64}。"data:application/pdf;base64,"这个一定要加,类似于HTTP请求的请求头,告知插件 是以什么格式解析数据
代码在此,分页都是ok的,只要你传入一个base64数据就ok。
import React, { PureComponent } from "react";
import { connect } from "dva";
import { Pagination,} from "antd";
import PDF from 'react-pdf-js';
class MyPdfViewer extends PureComponent {
state = { page: 1, current: 1, total: 1 };
onDocumentComplete = totalPage => {
this.setState({ total: totalPage });
};
onChange (page) {
this.setState({
page: page,
});
}
pdfChange = page => {
this.setState({
page: page,
current: page
});
};
render() {
return (
<div>
<PDF
scale={0.9}
file={"data:application/pdf;base64,"+this.props.datum.base64}
onDocumentComplete={this.onDocumentComplete}
page={this.state.page}></PDF>
<Pagination onChange={this.pdfChange} current={this.state.current} pageSize={1}
total={this.state.total}/>
</div>
)
}
}
效果图
谢谢大家的观看,有问题请留言。或者加我wx16653144918