记录一下:有一个下载文件的需求,后端有数据时返回文件流,没有数据时返回json,但是前端只处理了文件流,导致返回json时下载的文件显示如下错误信息。
现在就是这种情况要求前端在文件下载之前抛出错误提示,返回数据流时就正常下载。
fetch(url,xxx)
.then(res => {
// 返回json时也被读取为blob
return res.blob()
})
.then(async blob => {
try {
// Blob.text()返回一个promise且包含blob所有内容的string
const jsonString = await blob.text()
// blob 内容如果是json就提示错误出来 否则下载
const json = JSON.parse(jsonString)
message.error(json.message)
} catch (err) {
// 创建隐藏的可下载链接
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.style.display = 'none';
a.href = url;
// 保存下来的文件名
a.download = filename;
document.body.appendChild(a);
a.click();
// 移除元素
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
})