JavaScript导出CSV实现行间无空白单元格换行及格式问题修复

原代码问题根因 #

• 数组层级嵌套错误：masterCSV 每次推入的是[record.name]这类单元素数组，而非直接推入字段值，额外增加了数组维度
• 行拼接逻辑混乱：不需要单独维护masterCSV/row两个数组做截断，每一条服务端返回的record本身就是完整的一行数据，无需判断长度为3再换行
• 最终rows构造错误：将已经混入换行符的row数组再次包裹进数组，导致拼接时多生成了多余的逗号分隔符，就是你看到的缩进和空白单元格的来源

优化后可用代码 #

// 先构造表头
const rows = [
  ["Full Name", "Age", "City"]
];
// 遍历服务端数据，每一条记录直接作为一行
arrayPulledFromServer?.forEach(record => {
  rows.push([
    // 字段如果包含逗号/双引号提前转义，避免CSV格式错乱
    `"${(record.name || '').replace(/"/g, '""')}"`,
    record.age || '',
    `"${(record.city || '').replace(/"/g, '""')}"`
  ]);
});
// 拼接CSV内容
let csvContent = "data:text/csv;charset=utf-8," 
  + rows.map(e => e.join(",")).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "records.csv");
document.body.appendChild(link);
link.click();
// 用完移除DOM避免残留
document.body.removeChild(link);

优化说明 #

• 去掉了冗余的中间数组masterCSV、row，逻辑更简洁，不会产生多余的空白字符
• 增加了字段转义逻辑：如果字段内容本身包含逗号、双引号，会直接导致CSV列错位，转义后可以规避这类格式问题
• 新增了空值兜底，避免字段为undefined/null时导出显示为undefined字符串
• 增加了触发下载后a标签的移除逻辑，避免页面残留无用DOM

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