如何将指定JSON按自定义表头与格式转换为CSV？

核心方案 #

要实现指定表头和顺序的CSV转换，核心是先固定表头顺序，再严格按表头映射JSON字段，避免依赖JSON自身的属性顺序（因为JS对象属性顺序在某些场景下不可靠）。

具体实现步骤 #

1. 定义目标表头数组
   把你需要的CSV表头按期望顺序写成数组，比如：

const targetHeaders = ['用户ID', '用户名', '注册时间', '邮箱'];

2. 建立表头与JSON字段的映射关系
   针对每个表头字段，指定对应的JSON属性路径（嵌套结构要写完整路径），比如：

const fieldMap = {
  '用户ID': 'id',
  '用户名': 'profile.name',
  '注册时间': 'createTime',
  '邮箱': 'contact.email'
};

3. 编写字段值安全提取函数
   处理嵌套属性的提取，避免因属性不存在导致报错：

function getFieldValue(obj, path) {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : '';
  }, obj);
}

4. JSON转CSV核心逻辑
   遍历JSON数组，按表头顺序提取值，同时处理CSV特殊字符（逗号、引号）：

function jsonToCsv(jsonData, headers, fieldMap) {
  // 生成表头行
  const headerRow = headers.join(',');
  // 生成数据行
  const dataRows = jsonData.map(item => {
    return headers.map(header => {
      const value = getFieldValue(item, fieldMap[header]);
      // 处理含特殊字符的内容，符合CSV规范
      return typeof value === 'string' && (value.includes(',') || value.includes('"')) 
        ? `"${value.replace(/"/g, '""')}"` 
        : value;
    }).join(',');
  });
  // 拼接所有行
  return [headerRow, ...dataRows].join('\n');
}

5. 触发CSV文件下载
   将生成的CSV字符串转为Blob并触发浏览器下载：

function downloadCsv(csvContent, filename) {
  // 加BOM头解决中文乱码问题
  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

完整使用示例 #

假设你的接口返回JSON数据如下：

const apiData = [
  {
    id: 1001,
    profile: { name: '张三' },
    createTime: '2024-01-10',
    contact: { email: 'zhangsan@xxx.com' }
  },
  {
    id: 1002,
    profile: { name: '李四' },
    createTime: '2024-02-15',
    contact: { email: 'lisi@xxx.com' }
  }
];

调用代码：

const targetHeaders = ['用户ID', '用户名', '注册时间', '邮箱'];
const fieldMap = {
  '用户ID': 'id',
  '用户名': 'profile.name',
  '注册时间': 'createTime',
  '邮箱': 'contact.email'
};

const csvContent = jsonToCsv(apiData, targetHeaders, fieldMap);
downloadCsv(csvContent, '用户列表.csv');

常见问题排查 #

• 出现空值：检查fieldMap中的属性路径是否和JSON结构完全匹配（注意JS大小写敏感）。
• 中文乱码：确保Blob创建时指定charset=utf-8，并添加\uFEFF BOM头。
• CSV格式错乱：确认特殊字符（逗号、引号）已被双引号包裹，且内容中的双引号已转义为两个双引号。

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