文件导出下载到本地

console.log('D')

已于 2022-09-13 16:42:16 修改

阅读量161

点赞数

分类专栏： js 文章标签：前端

于 2022-09-13 11:24:33 首次发布

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/126830012

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端实现文件下载功能，包括通过axios处理错误并触发下载，以及使用Blob对象导出Excel文件。示例代码展示了downloadFile函数如何调用API获取文件，以及如何处理错误以直接触发zip文件的下载。此外，还提供了exprotExcal函数用于生成Excel文件，该函数接收文件名和二进制数据，创建Blob对象并触发浏览器下载。

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

export async function downloadFile(exportRecordId) {
    try {
        let result = await exportApi.getDownloadFile({ exportRecordId });
        return result;
    } catch (error) {
        // axios错误处理，页面走catch
        if (error.response) {
            return Promise.reject(error.response);
        }
        if (error.type === "application/zip") {
            const a = document.createElement("a");
            const href = window.URL.createObjectURL(error);
            a.href = href;
            a.download = `xxx.zip`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a); // 下载完成移除元素
            window.URL.revokeObjectURL(href);
            return { code: 200, data: null };
        } else {
            let data = await error.text();
            return JSON.parse(data);
        }
    }
}

拦截器：

    putFile: (url) => {
        return instance.get(url, { responseType: "blob" });
    },

/**
 * 导出Excel
 * @param name 文件名
 * @param data 二进制流
 */
export const exprotExcal = (name, data) => {
    const Link = new Blob([data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
    });
    const fileName = name + ".xlsx";
    const a = document.createElement("a");
    a.download = fileName;
    a.href = URL.createObjectURL(Link);
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
};