导出excel表格（兼容IE）

最新推荐文章于 2022-01-10 15:42:21 发布

原创最新推荐文章于 2022-01-10 15:42:21 发布 · 433 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#blob

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用前端技术实现导出数据为Excel文件的方法。通过POST请求将数据发送到服务器，然后以Blob形式接收响应，最终利用HTML5的a标签和download属性完成文件下载。此方法适用于需要将表格数据导出为Excel格式的应用场景。

export(url, param, fileName) {
    return new Promise(resolve => {
        instance({
            method: 'post',
            url,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: qs.stringify(param),
            responseType: 'blob',
        })
            .then(res => {
                const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
                if (window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveBlob(blob, fileName);
                } else {
                    const linkNode = document.createElement('a');
                    linkNode.download = fileName; // a标签的download属性规定下载文件的名称
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob); // 生成一个Blob URL
                    document.body.appendChild(linkNode);
                    linkNode.click(); // 模拟在按钮上的一次鼠标单击
                    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
                    document.body.removeChild(linkNode);
                }
                resolve('导出成功');
            })
            .catch(err => {
                console.error(err);
            });
    });
}