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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 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引用效率问题分析
2012/03/23 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PDO::rollBack讲解
2019/01/29 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
使用Python写个小监控
2016/01/27 Python
Python常见异常分类与处理方法
2017/06/04 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Django框架models使用group by详解
2020/03/11 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
网络技术支持面试题
2013/04/22 面试题
生产班组长岗位职责
2014/01/05 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
优秀教师主要事迹
2014/02/01 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
《搭石》教学反思
2014/04/07 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Win11查看设备管理器
2022/04/19 数码科技