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 相关文章推荐
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue实现员工信息录入功能
Jun 11 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中对2个数组相加的函数
2011/06/24 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python 异步async库的使用说明
2020/05/04 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
玲玲的画教学反思
2014/02/04 职场文书
自荐信如何制作?
2014/02/21 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android