使用SheetJS库批量导出多个CSV文件的技术咨询

嘿，我帮你梳理一下用SheetJS批量导出多个CSV文件的正确姿势，你的代码已经有了基础框架，但还有几个关键地方需要调整，下面是完整的解决方案：

原代码的核心问题 #

• 文件名拼接错误：你写的'i...'没有正确引用循环变量i，导致所有文件名都会重复或无效
• 做了多余操作：导出CSV不需要创建Excel工作簿，直接生成CSV字符串更高效

完整可运行代码 #

// 假设你已经有拆分好的dataSetDivided、finalHeaders，以及returnFormattedDate、state.fileName这些方法/属性
for (let i = 0; i < dataSetDivided.length; i++) {
  const exportSet = dataSetDivided[i];
  console.log(`正在处理第${i+1}份数据`);

  // 1. 将JSON数据集转换为SheetJS工作表
  const ws = XLSX.utils.json_to_sheet(exportSet, { header: finalHeaders });

  // 2. 将工作表直接转换为CSV格式字符串
  const csvContent = XLSX.utils.sheet_to_csv(ws);

  // 3. 生成唯一的导出文件名
  const todayDate = this.returnFormattedDate();
  const originalFileName = this.state.fileName;
  // 用模板字符串拼接，确保每个文件有唯一序号，示例格式："原始文件名_20240520_1.csv"
  const exportFileName = `${originalFileName}_${todayDate.replace(/-/g, '_')}_${i+1}.csv`;

  // 4. 触发浏览器下载CSV文件
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  
  link.href = downloadUrl;
  link.setAttribute('download', exportFileName);
  document.body.appendChild(link);
  link.click();
  
  // 清理临时元素和URL，避免内存泄漏
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
}

关键细节解释 #

• CSV生成优化：XLSX.utils.sheet_to_csv是SheetJS专门用来生成CSV的方法，跳过创建工作簿的步骤，既简洁又省资源
• 文件名唯一性：用${i+1}给每个文件加上序号，同时把日期里的-替换成_（避免部分操作系统不识别特殊字符）
• 下载逻辑规范：通过Blob和临时a标签触发下载是前端导出文件的标准方式，最后一定要清理临时元素和URL对象，防止内存泄漏
• 编码防乱码：Blob的MIME类型设置为text/csv;charset=utf-8;，能有效解决中文导出乱码的问题

如果你的returnFormattedDate方法返回的格式已经是20240520这种无特殊字符的形式，那replace操作可以去掉。

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