123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- import React, { Component } from "react";
- import { Modal, Button } from "antd";
- import "./index.less";
- // import PDF from 'react-pdf-js';
- /**
- * PDF上传 2022-08-15
- */
- class PDFView extends Component {
- constructor(props) {
- super(props);
- this.state = {
- fileState: props.visible,//父类传递的fileState
- type: props.fileType,//父类传递的fileType
- page: 1,
- pages: null,
- };
- this.onDocumentComplete = this.onDocumentComplete.bind(this);
- this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
- this.onDocumentComplete = this.onDocumentComplete.bind(this);
- this.handlePrevious = this.handlePrevious.bind(this);
- this.handleNext = this.handleNext.bind(this);
- }
- componentWillReceiveProps(nextProps) {//props发生变化时执行
- this.setState({
- fileState: nextProps.visible,//父类传递的fileState
- type: nextProps.fileType,//父类传递的fileType
- })
- }
- componentDidMount() {
- }
- onDocumentLoadSuccess(numPages) {
- this.setState({
- numPages,
- pageNumber: numPages
- })
- }
- //获取所有页
- onDocumentComplete(pages) {
- this.setState({ page: 1, pages })
- }
- //点击上一页
- handlePrevious() {
- this.setState({ page: this.state.page - 1 })
- }
- //点击下一页
- handleNext() {
- this.setState({ page: this.state.page + 1 })
- }
- render() {
- const { page, pages, type } = this.state;
- const { file, } = this.props
- return (<React.Fragment>
- <Modal
- title=""
- visible={this.state.fileState}
- footer={null}
- onCancel={this.props.closeFile}
- >
- <div>
- {
- type == 'pdf' ?
- <div>
- <div className={styles.filePdf}>
- <PDF
- file={file}
- onDocumentComplete={this.onDocumentComplete}
- page={page}
- />
- </div>
- <div className={styles.filePdfFooter}>
- {page === 1 ?
- null
- :
- <Button type='primary' onClick={this.handlePrevious}>上一页</Button>
- }
- <div className={styles.filePdfPage}>
- <span>第{page}页</span>/<span>共{pages}页</span>
- </div>
- {page === pages ?
- null
- :
- <Button style={{ marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页</Button>
- }
- </div>
- </div>
- : ''
- }
- </div>
- </Modal>
- </React.Fragment>)
- }
- }
- export default PDFView;
|