react xlsx 数据转换excle 插件

• 描述 :将table选中数据转换成excle
  或者将 一定形式的数据 手动转换为excle

• 安装 yarn add xlsx

• 使用

import * as XLSX from 'xlsx'


// 导出选择
  const handleExport = useCallback(() => {
    console.log(selectedRows)
    setLoading(true)
    // 导出到excel
    //excle  整个表为一个数组  结构类似[[表头],[第一行数据],[....]]
    //表头名称 注意顺序要和 插入顺序名称保持一致
    const excelArr: any = [
      [
        '推送记录ID',
        '用户ID',
        'open ID',

      ]
    ]
    //selectedRows为导出数据源
    selectedRows.forEach((item, index) => {
      const {
        planRecordId,
        userId,
        openId,
      } = item
	//在整个数组循环插入数据
      excelArr[index + 1] = [
       planRecordId,
        userId,
        openId,
      ]
    })
    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.aoa_to_sheet(excelArr)
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') // 将数据添加到工作薄
    XLSX.writeFile(wb, '推送详情.xlsx') // 导出Excel  
    setTimeout(() => {
      setSelectedRowKeys([])
      setLoading(false)
    }, 1000)
  }, [selectedRows])
//点击按钮导出 选中 
 return (
    <div>
      <div>
          // button Table 是antd 的组件
        <Button size="small" type="primary" onClick={handleExport} loading={loading}>
          导出选中
        </Button>
      </div>
  
      <Table
        rowSelection={rowSelection} //table 选中的数据
        columns={PushColumns}
        rowKey={(record) => record.id}
        dataSource={dataSource}
        pagination={pagination}
        loading={tableLoading}
        onChange={handleTableChange}
      ></Table>
    </div>
  )

npm :https://www.npmjs.com/package/xlsx
github:https://github.com/SheetJS/sheetjs
use Api:https://docs.sheetjs.com/