导出Excel表格请求封装方法 vue和react方法总结

原创已于 2024-05-14 16:37:06 修改 · 684 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #post

于 2020-02-07 18:25:34 首次发布

本文介绍了一种在Vue中导出Excel表格的封装方法，通过封装axios请求来实现，同时解决了导出文件名固定的问题。此外，还提供了在React项目中下载xlsx文件的更新方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue导出Excel表格有用插件的，我是用了另一个方法，封装请求Excel的接口，但导出的Excel表格名称都一样，不能改了，附上封装的接口方法。

export function postExcel(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(
            url,
            data,
            
            {
                headers:{'Content-Type':'application/json'},
                responseType:'blob', // 表明返回服务器返回的数据类型
            }
        )
        .then(res => {
            resolve(res.data);
            const blob = new Blob([res.data]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
            const fileName = '导出明细.xlsx';//下载文件名称
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);

        })
        .catch(err => {
            reject(err.data)
        })
    });
}

这个是封装的axios方法，直接调用传参就可以了

更新react项目下载xlsx的方法

export function postxlsx(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(
            url,
            data,
            {
                headers:{
                	'Accept':'application/json' //和后端的返回请求头保持一致，不	  然会下载的文件会报错
                },
                responseType:'blob', // 表明返回服务器返回的数据类型
            }
        )
        .then(res => {
            resolve(res.data);
            const blob = new Blob([res.data]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
            const disposition = headers['content-disposition'] || '';
            const undecodefilename = (disposition.split(`filename=`)[1]||'').split(';')[0] || 'download.zip' // 下载文件名称
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}