Laravel导出CSV设置'use_bom'=>true时前端日文显示异常问题

先确认Laravel端导出逻辑的正确性 #

确保你的CSV导出代码已经正确添加UTF-8 BOM，且响应头配置无冲突：

use League\Csv\Writer;

// 初始化CSV写入器并启用BOM
$csv = Writer::createFromString();
$csv->setOutputBOM(Writer::BOM_UTF8);

// 写入日文数据示例
$csv->insertOne(['ID', '日文名称', '备注']);
$csv->insertOne(['1', 'テストデータ', 'サンプル']);

// 返回响应，强制指定编码和传输方式
return response($csv->getContent())
    ->header('Content-Type', 'text/csv; charset=utf-8')
    ->header('Content-Disposition', 'attachment; filename="export.csv"')
    ->header('Content-Transfer-Encoding', 'binary')
    ->header('Pragma', 'no-cache')
    ->header('Expires', '0');

前端调用的核心问题：必须以二进制格式处理响应 #

Postman会自动处理二进制响应，但前端如果用普通文本方式接收，会破坏UTF-8 BOM或导致编码转换错误，以下是两种常用前端方案：

方案1：Axios调用示例

axios({
    url: '/api/export-csv',
    method: 'GET',
    responseType: 'blob', // 关键：强制以Blob二进制格式接收
}).then(res => {
    const url = window.URL.createObjectURL(new Blob([res.data], { type: 'text/csv; charset=utf-8' }));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'export.csv');
    document.body.appendChild(link);
    link.click();
    // 清理资源
    link.remove();
    window.URL.revokeObjectURL(url);
});

方案2：Fetch调用示例

fetch('/api/export-csv')
    .then(res => res.blob()) // 直接获取Blob数据
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'export.csv';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
    });

额外排查点 #

1. 检查服务器中间件：确认没有压缩中间件（如gzip）或CORS中间件篡改响应内容，必要时可临时禁用中间件测试。
2. 验证BOM是否存在：导出后用Notepad++打开CSV，查看编码是否为「UTF-8 BOM」，如果不是说明Laravel端BOM设置未生效。
3. Excel手动测试：如果手动选择UTF-8编码打开CSV能正常显示日文，说明问题完全出在前端响应处理环节。

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