index.jsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import React, { Component } from "react";
  2. import { Modal, Button } from "antd";
  3. import "./index.less";
  4. // import PDF from 'react-pdf-js';
  5. /**
  6. * PDF上传 2022-08-15
  7. */
  8. class PDFView extends Component {
  9. constructor(props) {
  10. super(props);
  11. this.state = {
  12. fileState: props.visible,//父类传递的fileState
  13. type: props.fileType,//父类传递的fileType
  14. page: 1,
  15. pages: null,
  16. };
  17. this.onDocumentComplete = this.onDocumentComplete.bind(this);
  18. this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
  19. this.onDocumentComplete = this.onDocumentComplete.bind(this);
  20. this.handlePrevious = this.handlePrevious.bind(this);
  21. this.handleNext = this.handleNext.bind(this);
  22. }
  23. componentWillReceiveProps(nextProps) {//props发生变化时执行
  24. this.setState({
  25. fileState: nextProps.visible,//父类传递的fileState
  26. type: nextProps.fileType,//父类传递的fileType
  27. })
  28. }
  29. componentDidMount() {
  30. }
  31. onDocumentLoadSuccess(numPages) {
  32. this.setState({
  33. numPages,
  34. pageNumber: numPages
  35. })
  36. }
  37. //获取所有页
  38. onDocumentComplete(pages) {
  39. this.setState({ page: 1, pages })
  40. }
  41. //点击上一页
  42. handlePrevious() {
  43. this.setState({ page: this.state.page - 1 })
  44. }
  45. //点击下一页
  46. handleNext() {
  47. this.setState({ page: this.state.page + 1 })
  48. }
  49. render() {
  50. const { page, pages, type } = this.state;
  51. const { file, } = this.props
  52. return (<React.Fragment>
  53. <Modal
  54. title=""
  55. visible={this.state.fileState}
  56. footer={null}
  57. onCancel={this.props.closeFile}
  58. >
  59. <div>
  60. {
  61. type == 'pdf' ?
  62. <div>
  63. <div className={styles.filePdf}>
  64. <PDF
  65. file={file}
  66. onDocumentComplete={this.onDocumentComplete}
  67. page={page}
  68. />
  69. </div>
  70. <div className={styles.filePdfFooter}>
  71. {page === 1 ?
  72. null
  73. :
  74. <Button type='primary' onClick={this.handlePrevious}>上一页</Button>
  75. }
  76. <div className={styles.filePdfPage}>
  77. <span>第{page}页</span>/<span>共{pages}页</span>
  78. </div>
  79. {page === pages ?
  80. null
  81. :
  82. <Button style={{ marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页</Button>
  83. }
  84. </div>
  85. </div>
  86. : ''
  87. }
  88. </div>
  89. </Modal>
  90. </React.Fragment>)
  91. }
  92. }
  93. export default PDFView;