怎样建设好门户网站,如何建一个营销网站,团购网站单页模板,做外贸需要哪些网站后端接口返回 Blob 数据流下载 Excel 文件流程
#x1f4cc; 前提条件#xff1a;
后端返回的是一个 Excel 文件流#xff08;Blob#xff09;你的接口请求使用了 axios
#x1f501; 步骤 1#xff1a;设置请求响应类型为 Blob 在发起请求时#xff0c;配置 respon…后端接口返回 Blob 数据流下载 Excel 文件流程 前提条件
后端返回的是一个 Excel 文件流Blob你的接口请求使用了 axios 步骤 1设置请求响应类型为 Blob 在发起请求时配置 responseType: blob确保后端返回的数据以二进制流形式接收。示例以 Axios 为例
axios.get(/api/download-excel, {params: {},responseType: blob
})步骤 2将响应数据转换为 Blob 对象 接收到响应后用 new Blob() 封装二进制数据并指定文件类型为 Excel 格式
const blob new Blob([res.data], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
});res.data就是后端返回的原始二进制数据type指定为 Excel 的 MIME 类型推荐 步骤 3创建临时下载链接 通过 URL.createObjectURL() 创建指向 Blob 的临时链接
const downloadUrl window.URL.createObjectURL(blob);这个链接是浏览器内部生成的不会真正请求服务器。 步骤 4创建 a 标签并模拟点击 动态生成 a 标签设置 href 为临时链接添加 download 属性指定文件名并模拟点击
const link document.createElement(a);
link.href downloadUrl;
link.download data.xlsx;
document.body.appendChild(link);
link.click();步骤 5 6清理内存中的对象 URL 和移除 a 标签 使用 URL.revokeObjectURL() 清理内存避免资源泄漏
window.URL.revokeObjectURL(downloadUrl); // 清理对象 URL
document.body.removeChild(link); // 移除 a 标签 完整代码示例
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);
});补充说明如何从响应头获取文件名
有些后端会在响应头里返回文件名例如
Content-Disposition: attachment; filename预充值记录-20240710.xlsx
你可以提取出来作为下载文件名
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 属性
link.setAttribute(download, filename); 如果你想统一封装一个下载函数推荐
你可以写一个通用函数来处理下载
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);});
}
使用示例
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)移除动态创建的标签
