AJAX调用时如何避免JSON数据自动按字母排序 保证CSV导出列顺序正确

问题根源 #

JavaScript对象的键遍历顺序无法保证和原始插入顺序完全一致，ES6规范仅对非数字开头的字符串键约定了按插入顺序遍历，但for...in遍历的顺序仍会受浏览器实现影响，你当前的代码直接用for...in遍历对象属性生成CSV，自然会出现列顺序错乱的问题。

解决方案 #

核心思路是不依赖对象遍历的顺序，主动指定CSV的列顺序，具体可以按你的场景选以下两种实现：

场景1：已知固定的列顺序 #

直接修改json2csv函数，新增列顺序入参，按指定顺序生成CSV：

function json2csv(objArray, columns) {
    const array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    // 拼接表头
    let str = columns.join(',') + '\r\n';
    // 按指定列顺序拼接每行内容
    for (let i = 0; i < array.length; i++) {
        const line = columns.map(column => array[i][column]).join(',');
        str += line + '\r\n';
    }
    return str;
}

调用时传入你需要的列顺序即可：

const csvContent = json2csv(你的服务端返回数据, ['Sr.No', 'EmployeeID', 'Name']);

场景2：列顺序和前端表格保持一致 #

直接从表格DOM读取表头作为列顺序，无需硬编码列名，适配性更强：

// 从页面表格读取列顺序
const tableHeaders = document.querySelectorAll('.s-table thead th');
const columns = Array.from(tableHeaders).map(th => th.textContent.trim());
// 调用转换函数
const csvContent = json2csv(你的服务端返回数据, columns);

优化建议 #

如果你的数据中存在包含逗号、双引号、换行符的内容，建议对字段值做转义处理，避免CSV格式错乱，可将生成行的逻辑修改为：

const line = columns.map(column => {
  // 给字段值加双引号，内部的双引号替换为两个双引号做转义
  return `"${String(array[i][column]).replace(/"/g, '""')}"`;
}).join(',');

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