前端基于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对象

相关推荐
问心无愧05134 分钟前
ctf show web 178
前端·笔记
岁岁种桃花儿7 分钟前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js
晓得迷路了10 分钟前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js
雪芽蓝域zzs11 分钟前
第四十四节:封装通用表格多选、批量操作组合式函数
前端·javascript·vue.js
ljt272496066111 分钟前
Vue笔记--路由
javascript·vue.js·笔记
那年窗外下的雪.16 分钟前
AIDC 学习日志|第 25 天|设备输出反推、MAC Flapping 与 EAD 撤销
前端·网络·git·学习·macos
IT_陈寒16 分钟前
Vite的HMR怎么突然罢工了?原来是我漏了这个配置
前端·人工智能·后端
柳杉27 分钟前
从调研到闭环,我用 GPT-Image-2.5 和 GPT-6 Astra 把智慧厂房 3D 大屏这条链路走完了
前端·ai编程·数据可视化
芳心粽伙饭27 分钟前
CSS第四章 布局
前端·css·html
CoderYanger32 分钟前
Java EE 进阶:2.3 JavaScript 综合案例
java·前端·javascript·css·职场和发展·java-ee·html