本文介绍Ajax异步下载文件的两种实现方式。方法一利用a标签直接下载，适用于GET请求；方法二通过XMLHttpRequest设置responseType为blob正确处理二进制流。重点指出jQuery默认将响应转为字符串导致文件损坏的问题，并提供完整的正确代码示例及按钮状态控制逻辑。
Ajax异步下载文件概述
摘要：本文介绍如何通过Ajax请求获取二进制流（如文件），并将其转换为Blob对象进行处理或保存下载。
需求场景与说明
需求场景
在管理后台中，用户需要随时下载数据报表。系统需实时生成数据并转换为Excel格式供用户下载。
由于文件体积不大，页面通常放置一个“导出”按钮。用户点击后，浏览器弹出保存文件对话框，用户可选择位置保存文件。
说明：第一种方法使用a标签直接下载可满足大部分常规需求。第二种方法主要阐述具体实现原理及提供更优的操作体验（例如：若生成过程耗时较长，可通过禁用按钮防止用户重复点击）。如果无需此类交互优化，可跳过第二种方法。
解决方案
解决方案
方法一：a标签直接下载
方法一
若请求文件的接口支持GET方法，可直接使用此方式。
<a class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt" rel="external nofollow" ><i class="fa fa-share-square-o fa-lg"></i> 导出</a>或者，可以通过JavaScript动态创建a标签来实现下载功能。
<button type="button" onclick="download()">导出</button>
function download() {
var a = document.createElement('a');
var url = 'download/?filename=aaa.txt';
var filename = 'data.xlsx';
a.href=url;
a.download = filename;
a.click()
}缺点
该方法不支持POST请求方法。
无法在下载启动时禁用按钮，也无法在下载完成后重新启用按钮，缺乏对下载状态的精细控制。
方法二：XMLHttpRequest处理Blob
方法二
尽管许多人认为第一种方法已足够，但存在错误的使用方式需要注意。
常规做法中，有人尝试使用jQuery：
<button type="button" onclick="download()">导出</button>
function download() {
var url = 'download/?filename=aaa.txt';
$.get(url, function (data) {
console.log(typeof(data))
blob = new Blob([data])
var a = document.createElement('a');
a.download = 'data.xlsx';
a.href=window.URL.createObjectURL(blob)
a.click()
})
}这种方式保存的文件通常无法打开。通过console.log(typeof(data))会发现data是string类型，原因是jQuery自动将返回的数据转换为了字符串，不支持直接处理blob类型。
正确方式
<button type="button" onclick="download()">导出</button>
function download() {
var url = 'download/?filename=aaa.txt';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 也可以使用POST方式，根据接口
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
reader.onload = function (e) {
// 转换完成，创建一个a标签用于下载
var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
}
}
};
// 发送ajax请求
xhr.send()
}总结
总结
以上介绍了Ajax请求二进制流进行处理（ajax异步下载文件）的简单方法，希望对大家有所帮助。如有疑问请留言，小编会及时回复。感谢支持！