| 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;
 |