cjd-parkball/src/components/table/data-export.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React, { Component } from 'react'
import { Button, Modal, Checkbox, Row, Col } from '../..'
import pickBy from 'lodash/pickBy'
import { request } from '../utils'

export default class extends Component {
  state = {
    exportVisible: false,
  }

  showModal = () => {
    this.setState({
      exportVisible: true,
    })
  }

  handleOk = () => {
    const { dataSource, downloadUrl } = this.props
    const selectColumns = this.state.checkedValues
    this.setState({
      exportVisible: false,
    })

    const exported = dataSource.map(datum => pickBy(datum, (value, key) => selectColumns.includes(key)))
    const initStr = selectColumns.join(',')
    const exportedData = exported.reduce((rst, cur) => {
      return rst.concat(`\n${Object.values(cur).join(',')}`)
    }, initStr)
    if (downloadUrl) {
      request(downloadUrl)
    } else {
      this.downloadCSV(exportedData, 'export.csv')
    }
  }

  downloadCSV = (csv, filename) => {
    const csvFile = new Blob([csv], { type: 'text/csv' })
    const downloadLink = document.createElement('a')
    downloadLink.download = filename
    downloadLink.href = window.URL.createObjectURL(csvFile)
    downloadLink.style.display = 'none'
    document.body.appendChild(downloadLink)
    downloadLink.click()
  }

  handleCancel = () => {
    this.setState({
      exportVisible: false,
    })
  }

  render () {
    const { columns } = this.props
    return (
      <React.Fragment>
        <Button type="primary" onClick={this.showModal}>
          导出
        </Button>
        <Modal
          title="导出数据"
          visible={this.state.exportVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Checkbox.Group style={{ width: '100%' }} onChange={this.ondataExportChange}>
            <Row>
              {
                columns.slice(0, columns.length - 1).map(col => (
                  <Col span={8}>
                    <Checkbox value={col.dataIndex}>{col.title}</Checkbox>
                  </Col>
                ))
              }
            </Row>
          </Checkbox.Group>
        </Modal>
      </React.Fragment>
    )
  }
}