ant design pro +react使用 xlsx 库和 FileSaver 库来实现导出多级表头表格

Ant Design Pro + React 可以使用 xlsx 库和 FileSaver 库来实现导出多级表头表格的功能。

首先，需要安装 xlsx 和 FileSaver 库：

npm install xlsx file-saver --save

然后，在代码中引入这两个库：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

接着，在需要导出表格的组件中，创建一个函数来生成 Excel 文件。下面是一个生成多级表头表格的示例函数：

export function exportExcel(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data);

  // 设置多级表头
  worksheet['!cols'] = [
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
    { wch: 20 },
  ];
  worksheet['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
    { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
    { s: { r: 0, c: 2 }, e: { r: 0, c: 4 } },
    { s: { r: 0, c: 5 }, e: { r: 1, c: 5 } },
    { s: { r: 0, c: 6 }, e: { r: 0, c: 8 } },
    { s: { r: 0, c: 9 }, e: { r: 1, c: 9 } },
    { s: { r: 0, c: 10 }, e: { r: 1, c: 10 } },
  ];

  // 生成 Excel 文件
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  FileSaver.saveAs(blob, `${fileName}.xlsx`);
}

在这个函数中，我们首先将数据转换成一个 worksheet 对象。接着，我们设置多级表头，这里使用了 `!cols` 和 `!merges` 属性来设置列宽和合并单元格。最后，我们将 worksheet 对象添加到一个新的 workbook 对象中，并将其写入Excel文件。

最后，我们可以在组件的 render 方法中使用这个函数来导出表格：

<button onClick={() => exportExcel(data, 'table')}>导出表格</button>

这样，用户点击这个按钮就可以将表格导出为 Excel 文件了。