关于react.js:axiosjs解析后端返回的流文件

133次阅读

共计 917 个字符,预计需要花费 3 分钟才能阅读完成。

1. 电脑系统 windows11 专业版
2. 开发环境 react18+ant5
3. 在开发的过程中, 咱们会遇到后端返回流文件, 前端应该怎么解析呢? 上面我来分享一下办法:

export const ExportApi = (data) => {
return axios({
url: 'file/export',
method: 'post',
data,
responseType: "blob",
});
}
const exportApi = async (type) => {
await ExportApi({type}).catch(error => {exportFileApi(error, "数据汇总");
});
}
/*
导出文件办法
fileData : 当值是 json 格局的时候, 示意接口失败, 提醒 导出数据失败
当值不是 json 格局的时候, 示意导出胜利,
fileName : 示意下载的文件名称
*/
export const exportFileApi = (fileData, fileName) => {if (fileData.type == "application/json") {message.error(fileData.message || "导出数据失败");
} else {let blob = new Blob([fileData], {type: "application/vnd.ms-excel"});
let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob);
let downFile = document.createElement("a");
downFile.style.display = "none";
downFile.href = objectUrl;
downFile.download = fileName;
document.body.appendChild(downFile);
downFile.click();
document.body.removeChild(downFile);
window.URL.revokeObjectURL(objectUrl);
}
}

99. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

正文完
 0