vue+axios 实现Excel下载

最新推荐文章于 2022-12-15 18:14:33 发布

江北彭于晏

最新推荐文章于 2022-12-15 18:14:33 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_45062261/article/details/97656249

本文详细介绍了如何使用axios从后端接口下载Excel文件的过程。通过设置responseType为'blob'，将服务器返回的数据转换为Blob对象，然后创建并触发a标签的点击事件实现文件下载，同时提供了非IE浏览器和IE10+的兼容性解决方案。

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

后端给出下载Excel的接口

 axios.get('/sms/task/export',{
            responseType: 'blob',// 表明返回服务器返回的数据类型,
            params: {
                params: JSON.stringify({
                    token: sessionStorage.token
                })
            }
        }).then((res)=>{
            const content = res
            const blob = new Blob([content.data])
            const fileName = '模板.xlsx'
            console.log("res",res);
            console.log('blob',blob);
            //return;
            if ('download' in document.createElement('a')) { // 非IE下载
              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)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
        })