工具类可以直接复制稍微修改进行使用，使用方法参考使用示例，基础的文件导入可以参考参考链接。

• 使用：

import TableImport from './TableImport'
import TableModelExport from './TableModelExport'
import TableModelExportCSV from './TableModelExportCSV'



  handleImportFromExcelData = (data = []) => {

  }

  render() {

const propsTableImport = {
handleImportFromExcelData:this.handleImportFromExcelData
}

const columns = [
{label:'姓名'},
{label:'单位'},
]

const propsTableModelExport = {
modelName:'模板名称',
columns:columns
}

    return (
      <Fragment>
<TableImport {...propsTableImport} />
<TableModelExport {...propsTableModelExport} />
<TableModelExportCSV {...propsTableModelExport} />
        
      </Fragment>
    )
  }

• 工具类
  导入Excel、CSV文件内容：
  TableImport.js

import React, { Component } from 'react'
import { Button, Input, message } from 'components'
import uuid from '~/utils/uuid'

export default class TableImport extends Component {
  state = {
    fileId: uuid()
  }

  handleImport = () => {
    document.getElementById(this.state.fileId).click()
  }

  onChangeInputFile = (e) => {
    var files = e.target.files
    if (files.length == 0) return
    var f = files[0]
    if (!(/\.xlsx$/g.test(f.name) || /\.csv$/g.test(f.name))) {
      message.error('仅支持读取xlsx或csv格式！')
      return
    }
    this.readWorkbookFromLocalFile(f, this.readWorkbook)
  }

  // 读取本地excel文件
  readWorkbookFromLocalFile = (file, callback) => {
    const reader = new FileReader()
    reader.onload = function(e) {
      const data = e.target.result
      const workbook = XLSX.read(data, { type: 'binary' })
      if (callback) callback(workbook)
    }
    reader.readAsBinaryString(file)
  }

  readWorkbook = (workbook) => {
    var sheetNames = workbook.SheetNames // 工作表名称集合
    var worksheet = workbook.Sheets[sheetNames[0]] // 这里我们只读取第一张sheet
    var csv = XLSX.utils.sheet_to_csv(worksheet)
    window.csv = csv
    const data = this.csvToArray(csv)
    this.props.handleImportFromExcelData(data)
  }

  csvToArray = (csv) => {
    const rows = csv.split('\n')
    rows.pop() // 最后一行没用的
    const keys = rows[0].split(',')
    const arr = []
    for (let i = 1; i < rows.length; i++) {
      const item = rows[i]
      const values = item.split(',')
      const arrItem = {

      }
      keys.map((key, index) => {
        arrItem[key] = values[index]
      })
      arr.push(arrItem)
    }
    // const data = [
    //   {
    //     源系统名称: '源系统名称',
    //     源IP地址: '10.10.10.10',
    //     源端口: '8080',
    //     目的系统名称: '目的系统名称',
    //     目的IP地址: '10.10.10.10',
    //     目的端口: '8080',
    //     访问协议: 'TCP',
    //     访问操作: '放行'
    //   },
    //   {
    //     源系统名称: '源系统名称',
    //     源IP地址: '10.10.10.10',
    //     源端口: '8080',
    //     目的系统名称: '目的系统名称',
    //     目的IP地址: '10.10.10.10',
    //     目的端口: '8080',
    //     访问协议: 'UDP',
    //     访问操作: '阻断'
    //   }
    // ]

    return arr
  }

  render() {
    return (
      <div style={{ display: 'inline' }}>
        <Button
          style={{ marginTop: 10, marginLeft: 10 }}
          type="primary"
          icon="upload"
          onClick={this.handleImport}
        >
          {i18n('ticket.form.add.import', '导入')}
        </Button>
        <Input type="file" id={this.state.fileId}
          onChange={this.onChangeInputFile}
          style={{ display: 'none' }} accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
      </div>
    )
  }
}

导出Excel文件：
TableModelExport.js

import React, { Component } from 'react'
import { Button, Input, message } from 'components'

export default class TableModelExport extends Component {
  handleExport = () => {
    var csv = '姓名,单位,手机号,可访问资源,VPN账号\n'
    csv = this.props.columns.map((item, i) => {
      return item.label
    })
    csv.join(',')
    csv = csv + '\n'
    this.exportExcel(csv)
  }

  exportExcel = (csv) => {
    const sheet = this.csv2sheet(csv)
    const blob = this.sheet2blob(sheet)
    this.openDownloadDialog(blob, `${this.props.modelName}模板.xlsx`)
  }

  // csv转sheet对象
  csv2sheet=(csv) => {
    const sheet = {} // 将要生成的sheet
    csv = csv.split('\n')
    csv.forEach(function(row, i) {
      row = row.split(',')
      if (i == 0) sheet['!ref'] = 'A1:' + String.fromCharCode(65 + row.length - 1) + (csv.length - 1)
      row.forEach(function(col, j) {
        sheet[String.fromCharCode(65 + j) + (i + 1)] = { v: col }
      })
    })
    return sheet
  }

  // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  sheet2blob = (sheet, sheetName) => {
    sheetName = sheetName || 'sheet1'
    const workbook = {
      SheetNames: [sheetName],
      Sheets: {}
    }
    workbook.Sheets[sheetName] = sheet
    // 生成excel的配置项
    const wopts = {
      bookType: 'xlsx', // 要生成的文件类型
      bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      type: 'binary'
    }
    const wbout = XLSX.write(workbook, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    // 字符串转ArrayBuffer
    function s2ab(s) {
      const buf = new ArrayBuffer(s.length)
      const view = new Uint8Array(buf)
      for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
      return buf
    }
    return blob
  }

  /**
   * 通用的打开下载对话框方法，没有测试过具体兼容性
   * @param url 下载地址，也可以是一个blob对象，必选
   * @param saveName 保存文件名，可选
   */
  openDownloadDialog = (url, saveName) => {
    if (typeof url === 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url) // 创建blob地址
    }
    const aLink = document.createElement('a')
    aLink.href = url
    aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event
    if (window.MouseEvent) event = new MouseEvent('click')
    else {
      event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    }
    aLink.dispatchEvent(event)
  }

  render() {
    return (
      <div style={{ display: 'inline' }}>
        <Button
          style={{ marginTop: 10, marginLeft: 10 }}
          type="primary"
          icon="download"
          onClick={this.handleExport}
        >
          {i18n('ticket.form.add.exportExcel', '导出Excel模板')}
        </Button>
      </div>
    )
  }
}

导出CSV文件：
TableModelExportCSV.js

import React, { Component } from 'react'
import { Button, Input, message } from 'components'

export default class TableModelExportCSV extends Component {
  handleExport = () => {
    var csv = '姓名,单位,手机号,可访问资源,VPN账号\n'
    csv = this.props.columns.map((item, i) => {
      return item.label
    })
    csv.join(',')
    csv = csv + '\n'
    this.exportCSV(csv)
  }

  exportCSV = (data = '') => {
    // 两个表数组转成字符串合并
    const merged = data
    // console.log(JSON.stringify(merged));//打印结果

    // ## 导出操作
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
    // 通过创建a标签实现
    const link = document.createElement('a')
    link.href = uri
    // 对下载的文件命名
    link.download = `${this.props.modelName}模板.csv`
    document.body.appendChild(link)
    link.click()
  }

  render() {
    return (
      <div style={{ display: 'inline' }}>
        <Button
          style={{ marginTop: 10, marginLeft: 10 }}
          type="primary"
          icon="download"
          onClick={this.handleExport}
        >
          {i18n('ticket.form.add.exportCSV', '导出CSV模板')}
        </Button>
      </div>
    )
  }
}

参考：
读取Excel、导出Excel、读取CSV：
https://www.cnblogs.com/liuxianan/p/js-excel.html

导出CSV：
https://blog.csdn.net/weixin_41628411/article/details/106280073