第一步：跟后端童鞋确认交付的接口的response header设置了
以及返回了文件流。
第二步：修改axios请求的responseType为blob，以post请求为例：
{
this.download(response)
}).catch((error) => {
})
第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）
文件
download (data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download','excel.xlsx')
document.body.appendChild(link)
link.click()}
}
下面在通过实例代码看下vue中使用axios
1.安装axios
npm：
$ npm install axios -S
cdn：
2.配置axios
在项目中新建api/index.js文件，用以配置axios
api/index.js
这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式
同时配置了跨域，不需要的话将withCredentials设置为false即可
并且设置了默认头部地址为：，这样调用的时候只需写访问方法即可
3.使用axios
注：PUT请求默认会发送两次请求，第一次预检请求不含参数，所以后端不能对PUT请求地址做参数限制
首先在main.js中引入方法
然后在需要的地方调用即可
{
if (response.status >= 200 && response.status < 300) {
console.log(response.data);\\请求成功，response为成功信息参数
} else {
console.log(response.message);\\请求失败，response为失败信息
}
});
总结
以上所述是小编给大家介绍的vue+axios实现文件下载及vue中使用axios的实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30015.html