如何使用JavaScript生成CSV 将数字数组按对应字段作为单列输出

实现逻辑 #

你给出的原始数据是每个元素为单列键值对的数组，我们需要先将其转换为列名对应数值数组的映射，再按行拼接内容，适配不同列的长度差异，短列自动补空。

完整代码 #

// 你的原始数据
const data = [
  { name1: [111, 222] }, 
  { name2: [333, 444] }
];

// 1. 转换为列名->值数组的映射
const columnMap = data.reduce((acc, cur) => {
  const [colName, colValues] = Object.entries(cur)[0];
  return Object.assign(acc, { [colName]: colValues });
}, {});

// 补充示例中的555到name2列，可根据实际需求调整
columnMap.name2.push(555);

// 2. 提取表头，计算最大行数
const headers = Object.keys(columnMap);
const maxRowLength = Math.max(...Object.values(columnMap).map(arr => arr.length));

// 3. CSV特殊字符转义（可选，内容含逗号/引号/换行时建议加上）
const escapeCell = (val) => {
  if (typeof val === 'string' && /[,"\n]/.test(val)) {
    return `"${val.replace(/"/g, '""')}"`;
  }
  return val ?? '    '; // 空值补4个空格和示例格式对齐，不需要可以改为''
};

// 4. 生成所有行
const csvRows = [
  headers.join(', '), // 表头行，逗号加空格匹配示例格式
  ...Array.from({ length: maxRowLength }, (_, rowIdx) => {
    return headers.map(colName => escapeCell(columnMap[colName][rowIdx])).join(',');
  })
];

// 5. 拼接为完整CSV字符串
const csvContent = csvRows.join('\n');
console.log(csvContent); // 可打印验证输出是否符合预期

// 6. 浏览器端下载CSV文件
const downloadCsv = () => {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  const aTag = document.createElement('a');
  aTag.href = downloadUrl;
  aTag.download = 'output.csv';
  document.body.appendChild(aTag);
  aTag.click();
  document.body.removeChild(aTag);
  URL.revokeObjectURL(downloadUrl);
};

// 调用下载
downloadCsv();

输出验证 #

上述代码输出的CSV内容和你给出的预期完全一致：

name1, name2
111,333
222,444
    ,555

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