前端处理后端返回的File数据

前端请求的时候

1.设置返回类型reponseType，使用blob类型接收。还有post请求要设置content-type:multipart/from-data（跟文件上传一样，是接收文件的）

responseType: "blob", // 表明返回服务器返回的数据类型
如果是post请求，则需要设置content-type(请求头)：
headers:{
         "content-type":"multipart/from-data",
        }

2.利用a标签自定义下载文件名

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

3.创建Blob对象，设置文件类型

let blob = new Blob([res], { type: "application/vnd.ms-excel" });

4.就是设置链接，自定义文件名字

link.style.display = "none";
//设置连接
link.href = URL.createObjectURL(blob);
link.download = "田间实时数据.xls";
document.body.appendChild(link);
//模拟点击事件
link.click();

5.整体代码如下

exportData() {
    this.Axios({
        method: "get",
        url: "/api/field/exportData",
        responseType: "blob", // 表明返回服务器返回的数据类型
    })
        .then((res) => {
        console.log(res, "导出数据");
        const link = document.createElement("a");//利用a标签自定义下载文件名
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });//创建Blob对象，设置文件类型
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "田间实时数据.xls";//自定义文件名字
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
    })
        .catch((err) => {
        console.log(err);
    });
},