vue+axios通过POST请求下载的文件是乱码

Question

单位现在做先后端分离，然后做到下载文件方面，卡住了，真心的求大佬指教或者给个方向

百度谷歌啥的都搜了半天，不知道是不是关键词错了，还是大家的环境不一样，代码看下来通过axios的好像都不成功,后端(java)写api的小伙伴说之前不分离的页面上点击请求也是这么下载的返回的不会有问题，困扰了好久了，求大佬解惑

相关代码

methods:{

downloadExcel(id){
    const data = {}
    data.id = id
    data.token = this.$store.state.token
    this.axios({
        method: "POST",
        url: '###',
        data: qs.stringify(data),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        responseType: 'arraybuffer'
    }).then(function(res) {
        let blob = new Blob([res], {type: "multipart/form-data"}); 
        let objectUrl = URL.createObjectURL(blob); 
        window.location.href = objectUrl;  
    });

}

}

下面图片是我请求和返回的信息

Answer 1

所谓的下载对前端来说就是获取一个文件地址，你应该让后端返回一个地址给你。

Answer 2

使用 blob()

Answer 3

var blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'}); //指定格式为vnd.ms-excel
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = 'xxx.xls'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象

这样写应该就可以了