axios 实现下载excel文件的说明~~~~遇到一个大坑，还是没有熟悉源码的罪过-优快云博客

本文介绍如何使用Axios替代a标签实现大文件的优雅下载，通过添加loading效果提升用户体验。文章详细展示了如何配置Axios以blob形式获取响应，并创建a标签触发文件下载，同时解决了跨域和文件格式问题。

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

2019独角兽企业重金招聘Python工程师标准>>>

本来下载文件直接用a标签，非常easy，但是如果数据量巨大的话，没有loading效果，用户体验非常差。优化项目的时候领导要求必须修改。因此只能用axios来下载了。

a标签下载：

 <a :href="downloadUrl">下载</a>

说明：downloadUrl为后端的接口

axios下载：

  <Button type="default" @click="downloadHistory(downloadUrlParams)">下载</Button>

			// 下载文件
            downloadHistory (params) {
                console.log(params)
                let self = this;
                let execlName = params.cityName + '_' + params.performanceMonth + '.xlsx';
                console.log(execlName);
                axios({
                    url: self.downloadUrl, // 接口名字
                    method: 'get',
                    params: {
                        id: params.id
                    },
                    responseType:"blob" 
                }).then(function (response) {
                    const blob = new Blob(
					[response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
                    const aEle = document.createElement('a');     // 创建a标签
                    const href = window.URL.createObjectURL(blob);       // 创建下载的链接
                    aEle.href = href;
                    aEle.download = execlName;  // 下载后文件名
                    document.body.appendChild(aEle);
                    aEle.click();     // 点击下载
                    document.body.removeChild(aEle); // 下载完成移除元素
                    window.URL.revokeObjectURL(href) // 释放掉blob对象
                })
            }

说明：

1、downloadHistory(downloadUrlParams)

downloadUrlParams参数是因为后端始终传不过来文件的名称，后来了解到文件名称是怎样操作所得之后，我自己按照他的方式拼接的。这个可以不用。

2、必须用下面的这一种方式，必须用下面的这一种方式，必须用下面的这一种方式

				axios({
                    url: self.downloadUrl, // 接口名字
                    method: 'get',
                    params: {
                        id: params.id
                    },
                    responseType:"blob"
                })

而不能用下面这个，我遇到的问题是如果添加 responseType:"blob"属性的话报跨域，如果不添加的话下载文件格式有错误打不开。切记不能用这种~

	axios.get(self.downloadUrl, params: {
		 id: params.id,
		 responseType:"blob"
	})

转载于:https://my.oschina.net/yj1993/blog/2876778