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

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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理