react 实现导出表格

使用js-xlsx实现该导出功能
项目背景：ant + react
概要：给js-xlsx传入他想要的数据结构，则直接生成对应的文件。

import exportExcel from './exportExcel';

render() {
  const initColumn = [{
      title: '工号',
      dataIndex: 'employeeNo',
      key: 'employeeNo',
      className: 'text-monospace',
    }, {
      title: '姓名',
      dataIndex: 'employeeName',
      key: 'employeeName',
    }, {
      title: '部门',
      dataIndex: 'org',
      key: 'org',
      width: 300,
      computed: record => record.org.substring(6),
    }, {
      title: 'Code',
      dataIndex: 'processShortCode',
      key: 'processShortCode',
      className: 'text-monospace',
    }, {
      title: '假期类型',
      dataIndex: 'leaveTypeLabel',
      key: 'leaveTypeLabel',
    }, {
      title: '天数',
      dataIndex: 'days',
      key: 'days',
      className: 'text-monospace text-right',
    }, {
      title: '事由',
      dataIndex: 'subject',
      key: 'subject',
      width: 200,
    }, {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      className: 'text-monospace',
    }, {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      className: 'text-monospace',
    }];

}
// attendanceInfoList 原始数据 Arr
<Button
      type="primary"
      onClick={() => exportExcel(initColumn, attendanceInfoList)}>
      导出
</Button>

import XLSX from 'xlsx';

function exportExcel(headers, data, fileName = '请假记录表.xlsx') {
  const _headers = headers
    .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
    .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});

  const _data = data
    .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
    // 对刚才的结果进行降维处理（二维数组变成一维数组）
    .reduce((prev, next) => prev.concat(next))
    // 转换成 worksheet 需要的结构
    .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

  // 合并 headers 和 data
  const output = Object.assign({}, _headers, _data);
  // 获取所有单元格的位置
  const outputPos = Object.keys(output);
  // 计算出范围 ,["A1",..., "H2"]
  const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;

  // 构建 workbook 对象
  const wb = {
    SheetNames: ['mySheet'],
    Sheets: {
      mySheet: Object.assign(
        {},
        output,
        {
          '!ref': ref,
          '!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],
        },
      ),
    },
  };

  // 导出 Excel
  XLSX.writeFile(wb, fileName);
}
export default exportExcel;

后期疑问：

1、为什么需要我了解那么多细节，还要各种循环，不能直接一个数据扔进去然后返回一个表格吗？
答：后期查看Util中的文档，可是实现。

 const wb = XLSX.utils.book_new();
/* 
  wb 是work book的缩写
  wb = {
     SheetNames: [],
     Sheets: {}
  } 
*/
  const aoaData = [
    ["this row should be", "hidden"],
    ["Hello", "World"]
  ]
//  aoa_to_sheet 将JS数据数组的数组转换为工作表
  const aoaWs = XLSX.utils.aoa_to_sheet(aoaData);

  const jsonData = [ { "agentNo":"324234", "subName":"30, Jul 2013 09:24 AM" }, { "agentNo":"444443", "subName":"30, Jul 2013 09:24 AM", "other": "111" } ]
// json_to_sheet 将JS对象数组转换为工作表
  const jsonWs = XLSX.utils.json_to_sheet(jsonData);

// 将aoaWs 数据放入xlsx文件中的第一个tab，tab名为aoaWs
  XLSX.utils.book_append_sheet(wb, aoaWs, 'aoaWs');
// 将jsonWs 数据放入xlsx文件中的第二个tab，tab名为jsonWs
  XLSX.utils.book_append_sheet(wb, jsonWs, 'jsonWs');

  XLSX.writeFile(wb, fileName);

2、控制显示数据

// TODO：
let ws = wb.Sheets.aoaWs;
let range = XLSX.utils.decode_range(ws["!ref"]);
ws["!ref"] = XLSX.utils.encode_range(range);

注：
java后端实现导出Excel csv文件见https://www.jianshu.com/p/39d481fac883