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