问题:点击下载后。接口会生成并返回文件流。在极端情况下接口数据返回异常,需要抛出错误信息,比如后端拼接错误情况、空文件情况。
难点:responseType设置为Blob后,返回内容为二进制文件流,从而无法获取错误信息。文件流截图如下:
解决方法:FileReafer()方案解决,示例代码:
if(res.data.success===undefined && res.data.type === 'application/json'){
const fileReader = new FileReader()
fileReader.readAsText(res.data,'utf-8')
fileReader.onload = function(){
const result = JSON.parse(fileReader.result)
// 获取到接口json对象。
// 情况1:有返回msg和code码(通过和业务层协商获取),可根据result.code码,弹出result.msg提示语
// 情况2: 返回正常,data为null,表明为空文件,弹窗提示为空文件取消下载。
}
return
}
总结:
1.下载文件场景ResponseType:"blob"时,需要报错提示,通过new FileReader把返回的数据转成文件,从而读取错误信息;
2.文件下载的方法,组装成二进制流文件,通过content-disposition获取正确的中文件名。代码如下:
if (res.headers["content-disposition"]) {
const fileName = decodeURIComponent(
res.headers["content-disposition"].split("=")[1]
);
byteToFile(res.data, fileName);
return true
}
3.byteToFile,返回的文件流数据转化为路径,创建A标签,触发点击下载文件路径。
export const byteToFile = (data, fileName) => {
let blob = new Blob([data]);
let url = window.URL.createObjectURL(blob);
let aLink = document.createElement("a");
if (fileName) {
aLink.download = fileName;
}
aLink.href = url;
aLink.click();
}
;