本文解决前端调用接口下载Excel时，后端返回JSON错误与二进制流两种情况下的兼容问题。通过保留axios的responseType为blob，利用FileReader读取response.data并解析JSON以获取错误提示，同时正常处理二进制流完成文件下载，确保权限校验与文件导出功能互不干扰。
Blob与JSON响应场景分析
今日探讨一个前端开发中常见的问题：当前端通过接口请求后端下载Excel文件时，后端通常会返回两种不同的响应类型。
第一种情况是用户权限不足，此时后端会返回JSON格式的数据，具体结构如图所示。
第二种情况是用户拥有权限，后端正常返回二进制流数据以供下载，具体结构如图所示。
axios配置与类型判断处理
在封装axios请求时，若设置responseType为'blob'，这将导致第一种情况下的响应被当作blob处理，无法直接读取其中的code和msg字段。此时需要将blob内容转换为文件进行读取，且不能取消responseType为'blob'的设置，否则会影响正常文件的下载功能。
在调用接口时，可以通过判断response.data中的type字段来确定返回的数据类型。
if(response.data.type=='application/json'){
const reader = new FileReader(); //创建一个FileReader实例
reader.readAsText(response.data, 'utf-8'); //读取文件,结果用字符串形式表示
reader.onload=function(){//读取完成后,**获取reader.result**
const {msg} = JSON.parse(reader.result);
this.$Message.error(msg); //弹出错误提示
}
}二进制流下载实现代码
如果需要展示二进制流数据，可以参考以下代码实现文件下载逻辑。
var blob = new Blob([response.data]);
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = "下载的文件"+ ".xlsx"; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象至此，关于JS中如何将blob返回值转换为json格式的文章介绍完毕，更多相关blob转换为json格式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！