前端导出CSV表格

一、直接上结果：

导出成功后的结果

二、功能代码（在这里我把导出CSV这个功能封装成了一个函数，方便后续使用）：

export const exportCSV = async (mainList: any, mainTitle: string[], mainTitleForKey: string[], filename: string) => {
    const mainStr = [];
    mainStr.push(mainTitle.join(',') + '\n'); // 把表格名称拼接进去
    for (let i = 0; i < mainList.length; i++) {
        const temp = [];
        for (let j = 0; j < mainTitleForKey.length; j++) {
            const strItem = '"' + mainList[i][mainTitleForKey[j]] + '"';
            temp.push(strItem + '');
        }
        mainStr.push(temp.join(',') + '\n');
    }
    const merged = mainStr.join('');
    const uri = 'data:text/csv;charset=utf-8,\ufeff' +encodeURIComponent(merged);
    const link = document.createElement('a'); //通过创建a标签实现
    link.href = uri;
    link.download = `${filename}.csv`;
    document.body.appendChild(link);
    link.click();
    return;
}

三、调用

1.从后端获取到的数据（⚠️注意参数的字段名，要对应上）

employeeDataList

2.函数调用（employeeDataList为上图中的数据）

const mainTitle = [
            '客服',
            '平均响应时长 (min)',
            '玩家平均等待时长 (min)',
            '响应次数',
            '超时次数',
            '超时率'
        ];
        const mainTitleForKey = [
            'name',
            'rep_time',
            'wait_time',
            'res_count',
            'over_count',
            'over_rate'
        ]
        exportCSV(employeeDataList, mainTitle, mainTitleForKey, '客服数据');

四、最后

导出CSV表格数据时，关于空格、换行的具体细节就不进行赘述了，看封装的函数代码即可