vue+axios实现post文件下载
2019-10-17 18:07
2446 查看
本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下
功能:点击导出按钮,提交请求,下载excel文件;
这里是axios的post方法。get方法请点击这里=》here
第一步:跟后端童鞋确认交付的接口的response header设置了
以及返回了文件流。
第二步:修改axios请求的responseType为blob,以post请求为例:
axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response => { this.download(response) }).catch((error) => { })
第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)
methods: { // 下载文件 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 运用Blob对象实现文件下载
- springboot+vue+axios实现本地文件(txt excel)下载
- vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
- vue+axios实现文件下载及vue中使用axios的实例
- libcurl post/get上传下载文件 以及断点下载(操作libcurl 实现断点下载(续点续传))
- vue.js 使用axios实现下载功能
- iOS开发-使用AFN实现GET/POST请求,以及文件下载/文件(图片)上传
- vue使用axios实现文件上传进度的实时更新详解
- vue使用axios使用二进制流下载文件
- C#实现http协议支持上传下载文件的GET、POST请求
- javascript以post方式实现文件的导出或下载
- vue结合axios实现的调用接口下载excel功能
- vue实现点击按钮下载文件功能
- JAVAWeb GET,POST,文件上传下载,验证码功能实现
- vue+axios+bolb下载文件,获取文件流乱码解决方法,
- vue.js 使用axios实现下载功能的示例
- 详解Vue+axios+Node+express实现文件上传(用户头像上传)
- vue+axios 实现Excel下载,并解析文件流
- VUE + axios上传下载文件踩坑之路
- Vue的axios插件实现GET、POST、JSONP请求,以及请求拦截