前端基于axios请求下载文件(后端返回Blob文件流)

前端小白第一篇csdn文章就当自己记录学习啦!

我自己遇到的情况写在前面防止有人和我不一样,浪费时间浏览;

调用下载接口后端给我返回的数据格式(即文件流格式)如下:

1.按钮定义点击事件

2.调用后端接口

在使用 axios 请求下载文件 api 接口时,注意区分不同请求方法的使用,语法如下:

// axios设置reponseType的方式应该类似下面

const url = '/info/download'

// get、delete、head 等请求

axios.get(url, {params: {}, responseType: 'blob'})

.then((res) => {})

.catch((err) => {})

// post、put、patch 等请求

axios.post(url, {...params}, {responseType: 'blob'})

.then((res) => {})

.catch((err) => {})

3.具体实现代码如下(可直接复制粘贴):

注:service是封装了axios

download() {

service({

method: "get",

url: `后端提供的接口`,

responseType: "blob",

}).then((res) => {

console.log(res);

console.log(res.data.type);

let blob = new Blob([res.data], { type: res.data.type });

let url = window.URL.createObjectURL(blob);

console.log(url);

let link = document.createElement("a");

link.style.display = "none";

link.href = url;

link.setAttribute("download", "文件名+后缀");//文件名后缀记得添加,我写的zip

document.body.appendChild(link);

link.click();

document.body.removeChild(link);//下载完成移除元素

window.URL.revokeObjectURL(url);//释放掉blob对象

相关推荐
张拭心1 小时前
Cursor 又偷偷更新,这个功能太实用:Visual Editor for Cursor Browser
前端·人工智能
I'm Jie1 小时前
深入了解 Vue 3 组件间通信机制
前端·javascript·vue.js
用户90443816324602 小时前
90%前端都踩过的JS内存黑洞:从《你不知道的JavaScript》解锁底层逻辑与避坑指南
前端·javascript·面试
CodeCraft Studio3 小时前
文档开发组件Aspose 25.12全新发布:多模块更新,继续强化文档、图像与演示处理能力
前端·.net·ppt·aspose·文档转换·word文档开发·文档开发api
PPPPickup3 小时前
easychat项目复盘---获取联系人列表,联系人详细,删除拉黑联系人
java·前端·javascript
老前端的功夫3 小时前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
前端大卫4 小时前
【重磅福利】学生认证可免费领取 Gemini 3 Pro 一年
前端·人工智能
孜燃4 小时前
Flutter APP跳转Flutter APP 携带参数
前端·flutter
脾气有点小暴4 小时前
前端页面跳转的核心区别与实战指南
开发语言·前端·javascript
lxh01134 小时前
最长递增子序列
前端·数据结构·算法