JSON转CSV时如何保留所有key？现有转换仅导出部分字段

问题说明 #

你现在的JSON转CSV代码只能导出第一个数组元素的Key作为表头，导致后续元素中的interface、alarm、service、unit、ipv6_address、vrf等Key无法在CSV中显示。

• 当前转换结果：仅显示bandwidth、destination_ipv4、destination_ipv6三个表头，其余字段完全缺失，后续数据行仅在这三列填充空值
• 预期转换结果：包含所有items中出现过的Key作为表头，每个数据行对应字段填充值，无对应值则为空

问题原因 #

代码中const header = Object.keys(items[0])只提取了第一个item的Key作为表头，没有遍历所有item来收集完整的Key集合。

解决代码 #

修改后的完整转换函数如下：

function download_file(data) {
    const items = data.items;
    const replacer = (key, value) => value === null ? '' : value;

    // 收集所有items中出现的唯一Key作为完整表头
    const allKeys = new Set();
    items.forEach(item => Object.keys(item).forEach(key => allKeys.add(key)));
    const header = Array.from(allKeys);

    // 遍历每个item，按表头字段填充值（无对应字段则为空字符串）
    let csv = items.map(row => 
        header.map(fieldName => {
            const value = row[fieldName] ?? '';
            return JSON.stringify(value, replacer);
        }).join(',')
    );

    csv.unshift(header.join(','));
    csv = csv.join('\r\n');

    var link = document.createElement("a");    
    link.id="lnkDwnldLnk";
    document.body.appendChild(link);
    blob = new Blob([csv], { type: 'text/csv' }); 
    var csvUrl = window.webkitURL.createObjectURL(blob);
    var filename = 'Result.csv';
    jQuery("#lnkDwnldLnk")
    .attr({
        'download': filename,
        'href': csvUrl
    });
    jQuery('#lnkDwnldLnk')[0].click();
    document.body.removeChild(link);
}

关键修改点 #

• 收集完整表头：通过Set遍历所有item的Key，确保所有出现过的Key都被纳入表头，同时自动去重
• 填充每行数据：对每个表头字段，检查当前item是否存在该字段，不存在则用空字符串填充；通过JSON.stringify处理对象、数组等复杂类型，避免CSV格式混乱

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