API返回JSON转指定格式CSV并实现下载的问题解决

问题分析 #

你的代码存在两个核心问题：

1. JSON未定义错误：API返回的是嵌套结构{items: {data: [...]}}，但你直接尝试访问jsonData[0]——顶层对象并非数组，自然会抛出错误。
2. CSV格式不匹配：原代码自动提取JSON对象的键作为表头，既没有对应目标CSV的字段映射，也没有给字段添加双引号，无法生成你需要的格式。

修正后的完整代码 #

HTML按钮 #

<button onclick="downloadJSONAsCSV('你的API接口地址')">下载CSV</button>

JavaScript逻辑 #

function downloadJSONAsCSV(endpoint) {
  fetch(endpoint)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(apiResponse => {
      // 正确获取API返回的实际数据数组
      const dataArray = apiResponse.items.data;
      const csvData = jsonToCsv(dataArray);

      // 创建并触发下载
      const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'batch_data.csv';
      document.body.appendChild(a);
      a.click();
      // 清理临时资源
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    })
    .catch(error => console.error('下载失败:', error));
}

function jsonToCsv(dataArray) {
  // 定义目标CSV的固定表头
  const headers = [
    "Header 1", "Header 2", "Header 3", "Header 4",
    "Header 5", "Header 6", "Header 7", "Header 8",
    "Header 9", "Header 10", "Header 11", "Header 12"
  ];

  // 定义JSON字段到CSV列的映射关系
  const fieldMap = [
    'batchCode', 'orderId', 'batchStatus', 'expirationDate',
    'numOfIds', 'numOfUsedIDs', 'batchId', 'redemptionMethod',
    'IDType', 'askEmployeeId', 'askOrgId', 'orgSelectionType'
  ];

  // 生成带双引号的表头行
  let csv = headers.map(header => `"${header}"`).join(',') + '\n';

  // 生成数据行，处理空值并添加双引号
  dataArray.forEach(row => {
    const rowData = fieldMap.map(fieldKey => {
      const value = row[fieldKey] ?? '';
      // 转义值中的双引号（CSV规范：用两个双引号表示一个）
      return `"${String(value).replace(/"/g, '""')}"`;
    });
    csv += rowData.join(',') + '\n';
  });

  return csv;
}

关键修改说明 #

• 数据路径修正：从apiResponse.items.data提取实际数据数组，避免对顶层对象的错误操作。
• 自定义映射规则：手动指定表头和对应的JSON字段，确保输出结构完全匹配需求。
• CSV格式合规：给所有字段添加双引号，同时处理值中可能存在的双引号，避免格式混乱。
• 资源清理：下载完成后释放Blob URL并移除临时创建的a标签，避免内存泄漏。

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