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

3次阅读

共计 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