|
@@ -1,104 +0,0 @@
|
|
|
-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;
|