React项目实现单按钮批量导出多Tab中Grid数据至Excel

核心逻辑 #

1. 维护已打开Tab的数据集：确保状态中存储所有当前激活Tab对应的SetName和完整数据列表
2. 遍历生成独立文件：对每个Tab的数据单独创建Excel工作簿，用SetName作为文件名区分
3. 触发批量下载：借助XLSX库的writeFile方法，逐个导出文件

代码实现 #

1. 导入依赖 #

import * as XLSX from 'xlsx';

2. 状态维护（已存在则忽略） #

假设项目中已通过状态管理已打开Tab的信息，结构如下：

const [openTabs, setOpenTabs] = useState([
  { setName: 'Original', data: [/* 该Tab的完整JSON数据 */] },
  { setName: 'Report 1', data: [/* 该Tab的完整JSON数据 */] }
]);

注意：切换、新增或关闭Tab时，需同步更新openTabs数组，确保数据与已打开Tab完全匹配

3. 批量导出函数 #

const handleBatchExport = () => {
  openTabs.forEach(tab => {
    // 将JSON数据转换为Excel工作表
    const worksheet = XLSX.utils.json_to_sheet(tab.data);
    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, tab.setName);
    // 导出文件，文件名以SetName命名
    XLSX.writeFile(workbook, `${tab.setName}_导出数据.xlsx`);
  });
};

4. 绑定导出按钮 #

<button onClick={handleBatchExport}>批量导出所有Tab数据</button>

关键注意点 #

• 必须确保tab.data是对应Tab的全部数据，而非Grid当前分页/过滤后的部分数据
• 部分浏览器会拦截批量下载操作，建议在按钮旁添加提示，引导用户允许下载权限
• 若数据量过大，可添加导出进度提示，或拆分批次导出避免浏览器卡顿

内容的提问来源于stack exchange，提问作者Chetan Kumar