vue+axios实现文件下载及vue中使用axios的实例

前端之家收集整理的这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

功能:点击导出按钮,提交请求,下载excel文件

第一步:跟后端童鞋确认交付的接口的response header设置了

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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章