后端给二进制数据遇到的bug

今天遇到一个新需求,需要把后端给的二进制数据下载成xlsx文件,也就是Excel文件. 其实这个需求倒不难,直接上代码

vue文件里面的代码

getexport(id).then((res) => {
        let url = window.URL.createObjectURL(new Blob([res.data], {type:   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "样本信息.xlsx"); // 文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放掉blob对象
      });

ajax请求代码

export const getexport = (id) => {
  return axios.request({
    url: `/aaaa/aaaa?aaaaid=${id}`,
    method: 'get',
  })
}

ajax就是正常的普通的ajax请求

后端也配置过格式了

但是下载下来的Excel文件就是一直打不开,报错文件内容已损坏,大致上就这个. 很头疼啊,不过前端程序员嘛.面向百度开发,百度了一下还真发现了问题 axios不会处理二进制流的数据,所以我们要在请求里加一行 responseType: 'blob',和data同级

ajax请求代码改

export const getexport = (id) => {
  return axios.request({
    url: `/aaaa/aaaa?aaaaid=${id}`,
    method: 'get',
    responseType: 'blob',
  })
}

再试就能Excel文件就能正常打开了.一行代码解决问题.