后端返回文件流前端进行下载

最新推荐文章于 2025-06-20 11:45:36 发布

原创最新推荐文章于 2025-06-20 11:45:36 发布 · 725 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

该博客介绍了如何在前端实现文件下载功能，包括通过创建Blob对象和利用a标签触发下载，以及设置响应头为arraybuffer的下载接口配置。重点讨论了如何处理不同类型的文件，如Excel和PDF。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 download().then((res) => {
    const blob = new Blob([res],{
    	// type类型后端返回来的数据中会有，根据自己实际进行修改
    	// 表格下载为 application/xlsx，压缩包为 application/zip等，
    	type: 'application/xlsx'
    }); //excel,pdf等
    const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
    const a = document.createElement("a"); //创建a标签
    a.style.display = "none";
    a.href = href; // 指定下载链接
    a.download = 'lake.xls'; //指定下载文件名
    a.click(); //触发下载
    URL.revokeObjectURL(a.href); //释放URL对象
})

// 下载接口配置
export const download = (params) => {
  return request({
    url:'/file/download',
    method:'get',
    responseType: 'arraybuffer', // 配置响应头，不配置的话会造成，文件下载下来了，但是“无法打开”
    params: params
  })
}