前端使用Blob或者FileReader对象下载后端返回的二进制文件

有时候当后端返回的响应体是二进制时，网关（gateway）会将response进行截断尝试转成json，从而导致下载或者导出的文件有问题一直打不开或者乱码。这种情况请后端解决或者放开一个请求白名单；

当下载或者导出后端返回时二进制文件时，前端可利用Blob或者FileReaderd对象来进行处理下载：

发送请求时responseType设置为'blob'或者'arraybuffer' 例如：

1. 使用Bolb：

function downLoadFileByBlob(res){ // 这里res是axios的所有返回结果
	const { data, headers } = res
	const fileType = headers["content-type"]; // 文件类型
	const fileName = decodeURI(headers["content-disposition"]).split(";")[1].split("=")[1]; // 文件名称
	// 创建a标签模拟点击
	const url = window.URL.createObjectURL(new Blob([data],{type:fileType})); // 注意第一个参数是数组形式
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
	
}

2. 使用FileReader对象：

function downLoadByFileReader(res){
  try {
    const blob = new Blob([res.data], {
      type: res.headers["content-type"]
    });
    const filename = decodeURI(res.headers["content-disposition"]).split(";")[1].split("=")[1];
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = (e) => {
      const a = document.createElement('a');
      a.download = filename;
      a.href = e.target.result;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  } catch (error) { 
  }
}