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

相关推荐
白泽_hunter11 分钟前
项目里最常见的 5 个 this 指向坑:从规则到实战彻底讲透
前端
宿67416 分钟前
vue3-pinia
前端·vue.js
白泽_hunter21 分钟前
搞懂 JS 数据类型:从 typeof 到手写完整类型判断,一张图理清
前端
日光倾1 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
自学it的攻城狮1 小时前
elpis-core ,koa实现的系统底座, 沉淀80% 的通用能力,剩下20% 用于定制化开发
前端
CappuccinoRose2 小时前
模块化体系
前端·import·export·es modules
AIDANHANG2 小时前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
Buke..3 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
半生过往4 小时前
前端学 Java 课程笔记
java·前端·笔记
广州华水科技4 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端