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

后端接口返回 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');

🚫 常见错误排查

✅ 总结：完整流程图