React JS中如何将T[]自定义对象数组正确转换为Blob实现下载

你现有代码无法生成有效文件的根本原因是：Blob 构造函数第一个参数仅接受由二进制对象（Blob/ArrayBuffer/TypedArray等）、字符串类型组成的可迭代集合，直接传入普通自定义对象数组时，JS会将每个对象默认转换为[object Object]字符串，最终生成的文件完全是无效内容。

根据你给出的对象数据结构（典型结构化业务报表数据），有两种最常用的正确实现方式：

如果需要保留完整的对象结构、不需要用表格软件打开，可以直接将对象数组序列化为JSON字符串后再生成Blob：

export function convertArrayObjToFileDownload(data, filename = 'data.json', filetype = 'application/json') {
    // 序列化为带缩进的格式化JSON，方便打开阅读
    const jsonString = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonString], { type: filetype });
    downloadBlob(blob, filename);
}

调用时文件名后缀保持.json即可，数百条数据的序列化性能完全没有问题。

如果需要导出后直接用Excel/WPS等表格软件打开，建议将对象数组转换为符合CSV规范的文本后再生成Blob，注意要处理特殊字符转义、中文乱码问题：

export function convertArrayObjToCsvDownload(data, filename = 'report.csv') {
    if (!data?.length) return;
    
    // 自动从第一条数据提取表头
    const tableHeaders = Object.keys(data[0]);
    
    // 处理CSV特殊字符转义：包含逗号、换行、双引号的字段需要包裹双引号，内部双引号转义为两个双引号
    const formatCellValue = (value) => {
        const strValue = String(value ?? '');
        if (strValue.includes(',') || strValue.includes('\n') || strValue.includes('"')) {
            return `"${strValue.replaceAll('"', '""')}"`;
        }
        return strValue;
    };

    // 拼接CSV完整内容：开头加UTF-8 BOM避免Excel打开中文乱码
    const csvText = [
        '\uFEFF',
        tableHeaders.join(','),
        ...data.map(row => {
            return tableHeaders.map(header => formatCellValue(row[header])).join(',');
        })
    ].join('\r\n'); // 用\r\n换行适配Windows系统表格软件

    const blob = new Blob([csvText], { type: 'text/csv;charset=utf-8;' });
    downloadBlob(blob, filename);
}

注意：如果需要导出为原生.xlsx格式的Excel文件，不建议手动拼接格式，直接使用成熟的表格处理库生成对应二进制内容后传入Blob即可，手动实现xlsx格式的编解码逻辑复杂度极高。

• 上述两种方案处理数百条规模的数据性能完全充足，不会造成页面卡顿
• 如果后续数据量级提升到10万条以上，建议将序列化逻辑放到Web Worker中执行，避免阻塞主线程导致页面无响应
• 本地生成Blob触发下载不存在跨域限制，不需要额外配置接口CORS规则

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