vue+axios实现post文件下载


Posted in Javascript onSeptember 25, 2019

本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下

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

这里是axios的post方法。get方法请点击这里=》here 

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

vue+axios实现post文件下载

以及返回了文件流。

第二步:修改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()
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
angularJS开发注意事项
May 26 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
javascript实现弹出层效果
Dec 10 Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
axios实现文件上传并获取进度
Mar 25 #Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 #Javascript
axios实现简单文件上传功能
Sep 25 #Javascript
layer弹出层取消遮罩的方法
Sep 25 #Javascript
You might like
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php可变长参数处理函数详解
2017/02/22 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python中random模块用法实例分析
2015/05/19 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
简单了解django缓存方式及配置
2019/07/19 Python
python创建学生管理系统
2019/11/22 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
英语专业学生个人求职信
2014/01/28 职场文书
安全责任协议书
2014/04/21 职场文书
机关保密承诺书
2014/06/03 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
小学端午节活动总结
2015/02/11 职场文书
农业项目合作意向书
2015/05/08 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
中学教代会开幕词
2016/03/04 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL