axios+js解析后端返回的流文件

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

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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

你可能感兴趣的:(axios+js解析后端返回的流文件)