React实现数组转Excel 补全MUI DataGrid导出arrayToExcel方法

前置准备 #

• 安装处理Excel格式的依赖包，执行命令：npm install xlsx
• 在当前组件文件顶部添加依赖导入：import * as XLSX from 'xlsx'

补全arrayToExcel函数 #

直接用以下代码替换原来的空函数即可：

const arrayToExcel = (data) => {
  // 将传入的JSON格式行数据转换为Excel工作表
  const workSheet = XLSX.utils.json_to_sheet(data);
  // 创建空的Excel工作簿
  const workBook = XLSX.utils.book_new();
  // 将工作表挂载到工作簿，可自定义工作表名称
  XLSX.utils.book_append_sheet(workBook, workSheet, "表格数据");
  // 触发浏览器下载，可自定义导出文件名
  XLSX.writeFile(workBook, `数据导出_${Date.now()}.xlsx`);
}

原有代码问题修正 #

你之前写的字段删除逻辑存在bug：map方法不会修改原数组，delete操作实际没有生效，建议在组装行数据的时候直接跳过不需要导出的字段，写法更简洁可靠：

const myfiltredRows = () => {
  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
  const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

  const data = filteredSortedRowIds.map((id) => {
    const row = {};
    visibleColumnsField.forEach((field) => {
      // 直接跳过不需要导出的复选框、操作列字段
      if (field !== "__check__" && field !== "action") {
        row[field] = apiRef.current.getCellParams(id, field).value;
      }
    });
    return row;
  });
  arrayToExcel(data);
};

提示：如果需要给导出的Excel添加单元格样式、自定义列宽，可以把安装的xlsx包替换为xlsx-js-style，基础导出用法完全一致，额外支持样式配置能力。

内容的提问来源于stack exchange，提问作者Nouhaila Khaouti