vue+axios实现post文件下载
更新时间：2022年04月27日 09:28:35 作者：yulj
这篇文章主要为大家详细介绍了vue+axios实现post文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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处理http发送请求的示例（Post和get）
- 详解vue axios用post提交的数据格式
- 详解Vue用axios发送post请求自动set cookie
- 解决vue处理axios post请求传参的问题
- vue axios post发送复杂对象问题
- 解决Vue axios post请求,后台获取不到数据的问题方法
- 解决在Vue中使用axios POST请求变成OPTIONS的问题
- vue中使用axios post上传头像/图片并实时显示到页面的方法
- vue 2.x 中axios 封装的get 和post方法
- Vue-cli中post请求发送Json格式数据方式
- vue基础之使用get、post、jsonp实现交互功能示例
- Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
相关文章
这篇文章主要介绍了简述vue状态管理模式之vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue+ElementUi实现点击表格链接页面跳转和路由效果
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了VUE3页面div如何点击改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue mint-ui tabbar变组件使用方法及实例代码，非常不错具有参考借鉴价值,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue使用nprogress实现进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要给大家介绍了关于Vue实例挂载的过程,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
使用Bootstrap + Vue.js实现添加删除数据示例
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
在Vue3项目中使用VueQuill编辑器,通过自定义Blot元素,可以插入特定的标签或样式元素,满足项目需求2024-11-11
vue 中的自定义指令是对底层 dom 进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。2017-01-01
在实际应用场景中,假如有一个下载或者导出请求,数据量非常大的情况下,接口响应的会很慢,这时候我我们想中断请求,该怎么做呢？本文给大家介绍了axios请求中断的几种方法,需要的朋友可以参考下2024-10-10
最新评论