如何通过jQuery Ajax触发CSV文件下载？附Laravel后端示例

针对你的需求，这里提供两种可行的方式来触发CSV文件下载：

方式一：通过Blob对象模拟下载链接（适配Ajax场景） #

在success回调中，将返回的CSV内容转换为Blob对象，再创建临时的<a>标签触发下载：

success: function(data) {
    // 把返回的CSV内容转成Blob对象，指定正确的MIME类型
    const csvBlob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
    // 生成Blob的临时访问URL
    const downloadUrl = URL.createObjectURL(csvBlob);
    // 创建<a>标签
    const link = document.createElement('a');
    link.href = downloadUrl;
    // 设置下载文件名，可自定义或从响应头解析（见下方补充）
    link.download = 'report.csv';
    // 触发点击后清理资源
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(downloadUrl);
}

方式二：直接跳转URL（更简洁的方案） #

其实你完全可以不用Ajax，直接构造带report_id的请求URL，通过页面跳转让浏览器自动处理下载：

// 替换整个Ajax代码，直接执行跳转即可
window.location.href = `reports/generateCSV?report_id=${id}`;

这种方式更简单，因为Laravel的streamDownload已经配置好了响应头，浏览器会识别这是下载文件，不会刷新页面，直接弹出下载弹窗。

补充：从响应头获取真实文件名 #

如果你的Laravel控制器在$headers里设置了Content-Disposition头（比如attachment; filename="xxx.csv"），可以在Ajax的回调中解析这个头拿到服务器指定的文件名：

success: function(data, textStatus, xhr) {
    let filename = 'report.csv';
    const dispositionHeader = xhr.getResponseHeader('Content-Disposition');
    if (dispositionHeader) {
        const filenameMatch = dispositionHeader.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
        if (filenameMatch && filenameMatch[1]) {
            filename = filenameMatch[1].replace(/['"]/g, '');
        }
    }
    // 后续Blob和下载链接的代码用这个filename即可
}

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