前端小白第一篇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);//下载完成移除元素文章来源：https://www.toymoban.com/news/detail-501441.html
window.URL.revokeObjectURL(url);//释放掉blob对象文章来源地址https://www.toymoban.com/news/detail-501441.html
到了这里，关于前端基于axios请求下载文件（后端返回Blob文件流）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
