1,安装 react-pdf-js插件:npm install --save react-pdf-js
2,代码如下
import React, { PureComponent } from "react";
import { connect } from "dva";
import { Pagination,} from "antd";
import PDF from 'react-pdf-js';
class AddCourseDetails 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 className={styles.backarea}>
<div>
<form>
<table>
<tr>
<td className={styles.trname}>标准PPT(全屏)</td>
<td>
<PDF
file="http://it-image.walimaker.com/2019/01/02/dc39e4ea855980d3e46cc9c89c7a852b.pdf"
onDocumentComplete={this.onDocumentComplete}
page={this.state.page}></PDF>
<Pagination onChange={this.pdfChange} current={this.state.current} pageSize={1} total={this.state.total} />
</td>
</tr>
</table>
</form>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return { ...state.addCourse };
}
export default connect(mapStateToProps)(AddCourseDetails);