使用js-xlsx實(shí)現(xiàn)該導(dǎo)出功能
項(xiàng)目背景：ant + react
概要：給js-xlsx傳入他想要的數(shù)據(jù)結(jié)構(gòu)趋箩，則直接生成對(duì)應(yīng)的文件雌芽。

import exportExcel from './exportExcel';

render() {
  const initColumn = [{
      title: '工號(hào)',
      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: '天數(shù)',
      dataIndex: 'days',
      key: 'days',
      className: 'text-monospace text-right',
    }, {
      title: '事由',
      dataIndex: 'subject',
      key: 'subject',
      width: 200,
    }, {
      title: '開始時(shí)間',
      dataIndex: 'startTime',
      key: 'startTime',
      className: 'text-monospace',
    }, {
      title: '結(jié)束時(shí)間',
      dataIndex: 'endTime',
      key: 'endTime',
      className: 'text-monospace',
    }];

}
// attendanceInfoList 原始數(shù)據(jù) Arr
<Button
      type="primary"
      onClick={() => exportExcel(initColumn, attendanceInfoList)}>
      導(dǎo)出
</Button>

import XLSX from 'xlsx';

function exportExcel(headers, data, fileName = '請(qǐng)假記錄表.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) })))
    // 對(duì)剛才的結(jié)果進(jìn)行降維處理（二維數(shù)組變成一維數(shù)組）
    .reduce((prev, next) => prev.concat(next))
    // 轉(zhuǎn)換成 worksheet 需要的結(jié)構(gòu)
    .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

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

  // 構(gòu)建 workbook 對(duì)象
  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 }],
        },
      ),
    },
  };

  // 導(dǎo)出 Excel
  XLSX.writeFile(wb, fileName);
}
export default exportExcel;

后期疑問：

1、為什么需要我了解那么多細(xì)節(jié)晌块，還要各種循環(huán)瘤载，不能直接一個(gè)數(shù)據(jù)扔進(jìn)去然后返回一個(gè)表格嗎？
答：后期查看Util中的文檔梭依，可是實(shí)現(xiàn)稍算。

 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數(shù)據(jù)數(shù)組的數(shù)組轉(zhuǎn)換為工作表
  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對(duì)象數(shù)組轉(zhuǎn)換為工作表
  const jsonWs = XLSX.utils.json_to_sheet(jsonData);

// 將aoaWs 數(shù)據(jù)放入xlsx文件中的第一個(gè)tab，tab名為aoaWs
  XLSX.utils.book_append_sheet(wb, aoaWs, 'aoaWs');
// 將jsonWs 數(shù)據(jù)放入xlsx文件中的第二個(gè)tab役拴，tab名為jsonWs
  XLSX.utils.book_append_sheet(wb, jsonWs, 'jsonWs');

  XLSX.writeFile(wb, fileName);

2糊探、控制顯示數(shù)據(jù)

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

注：
java后端實(shí)現(xiàn)導(dǎo)出Excel csv文件見http://www.reibang.com/p/39d481fac883