如何将JavaScript对象正确导出为规范CSV表格？

问题场景 #

我有一个名为df的JavaScript对象，内部包含多个二元数组，结构示例如下：

0: Array(2)
  0: "1405"
  1: "text string 1 #something"
1: Array(2)
  0: "1366"
  1: "text string 2 #hashtag"
603: Array(2)
  0: "92"
  1: "text string 603"

目标是将其导出为带表头Views、Title的规范CSV，理想输出如下：

我原本使用以下代码导出CSV：

const blob = new Blob([df], { type: "text/csv; charset=utf-8;" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "export.csv");

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

但导出后的CSV格式完全混乱，表现为：

问题根源 #

经过排查，问题出在文本字段中隐藏的换行符，这些换行符会被CSV解析器识别为新行的开始，导致内容被拆分到错误的行和列中。

解决方法 #

1. 清理文本中的换行符 #

使用正则表达式移除文本中的所有换行符（包括\r\n、\n、\r），替换为空格：

// 处理单个文本字段
cleanedText = text.replace(/(\r\n|\n|\r)/gm, " ");

2. 完整的CSV导出流程 #

需要先将df中的数据转换为符合CSV规范的字符串，再生成Blob导出：

// 1. 定义表头
const headers = ["Views", "Title"];

// 2. 处理数据：清理换行符，转换为CSV行格式
const rows = Object.values(df).map(item => {
  // 处理每个字段，确保包含特殊字符时用引号包裹（可选但更严谨）
  const cleanedViews = item[0].replace(/(\r\n|\n|\r)/gm, " ");
  const cleanedTitle = item[1].replace(/(\r\n|\n|\r)/gm, " ");
  // 如果字段包含逗号、引号或换行，用双引号包裹（这里已经处理换行，可选处理其他字符）
  return `"${cleanedViews}","${cleanedTitle}"`;
});

// 3. 拼接表头和行数据，用换行符分隔
const csvContent = [headers.join(","), ...rows].join("\n");

// 4. 生成Blob并下载
const blob = new Blob([csvContent], { type: "text/csv; charset=utf-8;" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "export.csv");

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

补充说明 #

如果文本中包含逗号或双引号，还需要额外处理：

• 双引号需要替换为两个双引号（CSV转义规则）
• 包含逗号、双引号的字段必须用双引号包裹

可以扩展处理函数：

function formatCsvField(field) {
  // 移除换行符
  let cleaned = field.replace(/(\r\n|\n|\r)/gm, " ");
  // 如果包含逗号或双引号，转义并包裹
  if (cleaned.includes(",") || cleaned.includes('"')) {
    cleaned = `"${cleaned.replace(/"/g, '""')}"`;
  }
  return cleaned;
}

然后在生成行时使用：

const rows = Object.values(df).map(item => {
  return [formatCsvField(item[0]), formatCsvField(item[1])].join(",");
});

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