Ajax请求中如何处理控制器返回的文件响应？附替代方案

一、Ajax回调中实现文件下载 #

Ajax请求返回的是文件二进制流，需要手动处理成可下载的文件，在success回调里添加以下代码：

success: function(response) {
    // 1. 将响应数据转为Blob对象，指定对应MIME类型
    const blob = new Blob([response], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    // 2. 创建Blob的临时URL
    const url = window.URL.createObjectURL(blob);
    // 3. 创建a标签用于触发下载
    const a = document.createElement("a");
    a.href = url;
    // 设置下载文件名
    a.download = "lp.xlsx";
    // 4. 触发点击事件
    document.body.appendChild(a);
    a.click();
    // 5. 清理临时资源
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

注意：必须给Ajax请求加上responseType配置，否则会解析错误，完整Ajax配置如下：

$.ajax({
    type: "GET",
    url: "/Home/Excel",
    data: { "data": $(this).html() },
    responseType: "blob", // 新增该行指定响应类型
    success: function(response) {
        // 上述处理代码
    }
});

二、无需Ajax的方案建议 #

1. 使用表单提交 #

把表格数据存入表单隐藏字段，提交表单到控制器，浏览器会自动处理文件下载：

<!-- 创建隐藏表单 -->
<form id="excelForm" action="/Home/Excel" method="GET" style="display:none;">
    <input type="hidden" name="data" id="tableData">
</form>

<script>
$(".pfamlink").click(function() {
    // 把表格数据赋值给隐藏字段
    $("#tableData").val($(this).html());
    // 提交表单触发下载
    $("#excelForm").submit();
});
</script>

如果数据量较大，可将method改为POST，控制器对应方法添加[HttpPost]特性即可。

2. 使用window.open直接跳转 #

如果数据量不大（在URL长度限制内），可直接把数据拼到URL参数里，通过跳转触发下载：

$(".pfamlink").click(function() {
    const tableData = encodeURIComponent($(this).html());
    // 打开新窗口下载
    window.open(`/Home/Excel?data=${tableData}`);
    // 或当前窗口跳转：location.href = `/Home/Excel?data=${tableData}`;
});

这种方式无需额外处理，控制器返回File后浏览器会自动触发下载。

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