<p>Vue中Axios下载文件流需设responseType: 'blob'，再从Content-Disposition响应头提取真实文件名（兼容filename和filename* RFC 5987格式），解码后构造Blob并用a标签触发下载，最后释放URL对象。</p>
Vue 中用 Axios 下载文件流，关键不是“手动填文件名”，而是从响应头里准确提取服务器返回的真实文件名——尤其是中文或特殊字符时，必须兼顾 Content-Disposition 的标准字段和 RFC 5987 兼容格式。
设置 responseType 为 blob 是前提
不设这个，响应体默认转成字符串，二进制数据会损坏，后续所有操作都无效。必须显式声明：
-
GET 请求：在 axios 配置中加
responseType: 'blob' -
POST 请求（如导出参数提交）：同样要加，且推荐用
axios.post(url, data, { responseType: 'blob' }) - 避免漏掉：如果封装了 request 实例，记得全局或单次请求中带上该配置
从响应头解析真实文件名
后端通常通过 Content-Disposition 响应头传递文件名，但格式可能有差异。需同时兼容两种写法：
-
attachment; filename="report.xlsx"→ 取双引号内内容 -
attachment; filename*=utf-8''%E6%8A%A5%E8%A1%A8.xlsx→ 这是 RFC 5987 格式，需解码（decodeURIComponent）
实际提取逻辑可简化为：
立即学习“前端免费学习笔记（深入）”；
function getFileNameFromHeaders(headers) {
const disposition = headers['content-disposition'] || '';
const utf8Match = /filename\*=(?:UTF-8)?''([^;]*)/i.exec(disposition);
if (utf8Match && utf8Match[1]) {
return decodeURIComponent(utf8Match[1]);
}
const defaultMatch = /filename[^;=\n]*=([^;]*)/i.exec(disposition);
if (defaultMatch && defaultMatch[1]) {
return defaultMatch[1].replace(/["']/g, '').trim();
}
return 'download';
}
构造 Blob 并触发下载
拿到文件名和 blob 数据后，创建临时链接下载，注意释放内存：
- 用
new Blob([data], { type: headers['content-type'] || 'application/octet-stream' })构造 Blob，保留原始 MIME 类型更稳妥 -
URL.createObjectURL(blob)生成临时 URL - 创建
<a>标签，设置href和download属性，再调用.click() - 下载完成后务必执行
URL.revokeObjectURL(url)，防止内存泄漏
兼容 IE 的注意事项
IE10+ 支持 navigator.msSaveOrOpenBlob，若项目仍需支持旧版 IE，可加判断分支：
- 存在
navigator.msSaveBlob时，直接调用navigator.msSaveBlob(blob, fileName) - 否则走标准
a标签方案 - 现代项目（Vue 3 + Chrome/Firefox/Safari）基本无需处理 IE 分支
