前端如何通过 Blob 下载 Excel 文件

后端接口返回 Blob 数据流下载 Excel 文件流程

📌 前提条件:

  • 后端返回的是一个 Excel 文件流(Blob)
  • 你的接口请求使用了 axios

🔁 步骤 1:设置请求响应类型为 Blob

在发起请求时,配置 responseType: 'blob',确保后端返回的数据以二进制流形式接收。示例(以 Axios 为例):

javascript 复制代码
axios.get('/api/download-excel', {
  params: {},
  responseType: 'blob'
})

🧾 步骤 2: 将响应数据转换为 Blob 对象

接收到响应后,用 new Blob() 封装二进制数据,并指定文件类型为 Excel 格式:

javascript 复制代码
const blob = new Blob([res.data], {
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
  • res.data:就是后端返回的原始二进制数据
  • type:指定为 Excel 的 MIME 类型(推荐)

🔗步骤 3:创建临时下载链接

通过 URL.createObjectURL() 创建指向 Blob 的临时链接:

javascript 复制代码
const downloadUrl = window.URL.createObjectURL(blob);

这个链接是浏览器内部生成的,不会真正请求服务器。

📥 步骤 4:创建 <a> 标签并模拟点击

动态生成 <a> 标签,设置 href 为临时链接,添加 download 属性指定文件名,并模拟点击:

javascript 复制代码
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'data.xlsx';
document.body.appendChild(link);
link.click();

🧹步骤 5 & 6:清理内存中的对象 URL 和移除 <a> 标签

使用 URL.revokeObjectURL() 清理内存,避免资源泄漏:

javascript 复制代码
window.URL.revokeObjectURL(downloadUrl); // 清理对象 URL
document.body.removeChild(link); // 移除 <a> 标签

完整代码示例

javascript 复制代码
axios.get('/api/download-excel', {
  params: {},
  responseType: 'blob'
}).then(res => {
  const blob = new Blob([res.data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'data.xlsx';
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
});

🧪 补充说明:如何从响应头获取文件名?

有些后端会在响应头里返回文件名,例如:

javascript 复制代码
Content-Disposition: attachment; filename="预充值记录-20240710.xlsx"

你可以提取出来作为下载文件名:

javascript 复制代码
const disposition = res.headers['content-disposition'];
let filename = '预充值记录.xlsx';

if (disposition && disposition.indexOf('filename=') !== -1) {
    const matches = /filename="?([^"]+)"?/.exec(disposition);
    if (matches.length > 1) {
        filename = decodeURIComponent(matches[1]);
    }
}

然后传给 download 属性:

javascript 复制代码
link.setAttribute('download', filename);

🛠 如果你想统一封装一个下载函数(推荐)

你可以写一个通用函数来处理下载:

javascript 复制代码
function downloadFile(url, method = 'get', data = {}, filename = '文件.xlsx') {
    return sendPost(url, data, method, {}, {}, {
        responseType: 'blob'
    }).then(res => {
        const blob = new Blob([res.data]);
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(link);
    });
}

使用示例:

javascript 复制代码
downloadFile('/user/user/prepay/log', 'get', {
    created_time_start: '2024-07-01',
    created_time_end: '2024-07-10',
    excel: true
}, '预充值记录.xlsx');

🚫 常见错误排查

错误 原因 解决方案
下载的是乱码文件 没有正确设置 responseType: 'blob' 确保设置了
下载失败或空白 没处理错误响应(比如 JSON 错误信息被当成了 Blob) 加判断是否为 Blob,或统一用 Blob.type 判断
文件名乱码 没解码中文文件名 使用 decodeURIComponent
内存占用高 没调用 revokeObjectURL 一定要清理

✅ 总结:完整流程图

步骤 说明
1️⃣ responseType: 'blob' 请求时配置,接收二进制数据
2️⃣ new Blob([res.data]) 创建 Blob 对象
3️⃣ URL.createObjectURL(blob) 创建临时下载链接
4️⃣ 创建 <a> 标签并点击 触发浏览器下载行为
5️⃣ URL.revokeObjectURL() 清理内存
6️⃣ removeChild(link) 移除动态创建的标签
相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7745 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT6 小时前
js基础重点复习
javascript
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋8 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan9 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron