axios导出axios下载文件

最新推荐文章于 2024-06-24 17:12:04 发布

有理想的猪肝

最新推荐文章于 2024-06-24 17:12:04 发布

阅读量502

点赞数

分类专栏： # axios 文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.csdn.net/YLXD_class/article/details/126728450

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该代码片段展示了如何结合ElementUI的加载提示和Axios实现文件的GET请求导出。在导出过程中，它创建了一个Blob对象，并利用浏览器特性处理文件下载，同时处理了IE10及以上浏览器的兼容性问题。

摘要由CSDN通过智能技术生成

结合Element ui实现

axiosExportHandle(url, body) {
    const loading = this.$loading({
        lock: true,
        text: '导出中...',
        spinner: 'el-icon-loading'
    });
    axios({
        baseURL: window.CONFIG.baseUrl,
        timeout: 300000,
        url: url,
        method: 'GET',
        responseType:'blob',
        data: body
    }).then(res => {
        const blob = new Blob([res.data], {type: res.data.type});
        const fileName = decodeURIComponent(res.headers['content-disposition'].substring(20));
        // 是IE >=IE10
        if (window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(blob, fileName);
        } else {
            const objectURL = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = objectURL;
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(objectURL);
        }
        loading.close();
    }).catch(e => {
        loading.close();
        this.$message.error(e)
    });
}