vue+axios实现文件下载
功能:点击导出按钮,提交请求,下载excel文件;
第一步:跟后端童鞋确认交付的接口的response header设置了

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实现文件下载的更多相关文章
- vue+axios+springboot文件下载
//前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- Vue + axios + SpringBoot 2实现导出Excel
Vue + axios + SpringBoot 2实现导出Excel 1. 前端js代码-发送Http请求 /** * 文件下载 * @param url 下载地址 * @param fileNam ...
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
- VUE AXIOS 跨域问题
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
- vue axios 总结篇
1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...
随机推荐
- angularjs html 转义
angularjs html 转义 默认情况下,AngularJS对会对插值指令求职表达式(模型)中的任何HTML标记都进行转义,例如以下模型: $scope.msg = “hello,<b&g ...
- python学习——读取染色体长度(三、用循环或者函数求总长并获取最长染色体长度)
# 读取fasta # 解析每条序列的长度 chr_len = [10,20,30,40,50] # 求和 # 方法一:通过循环 total_len = 0 #定义total_len的初始长度 for ...
- idea 右键无java class选项
项目中新建module之后,要在该目录下新增java Class文件,右键——>New发现无Java Class选项. File –Project Structure或者ctrl+alt+shi ...
- cordova插件汇总
1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plu ...
- Linux新增和删除环境变量
vi ~/.bashrc 添加 export 变量名=值 使环境变量生效 source ~/.bashrc
- 对多条件进行组合,生成笛卡尔积的用例集合的python代码实现
做专项测试需要对一些因素进行组合的测试,这里组合起来后数据量可能很大,我们可以用python来代劳 代码有优化空间,目前先用着. ************************代码开始******* ...
- mysql jdbc 官方编程示例
/* Basic example of an application using JDBC API of Connector/C++ */ /* Standard C++ includes */ #i ...
- Git基本原理-hash算法
一.哈希 哈希是一个系列的加密算法,各个不同的哈希算法虽然加密强度不同,但是有以下几个共同点: ①不管输入数据的数据量有多大,使用同一个哈希算法,得到的加密结果长度固定 ②哈希算法确定,输入数 ...
- CSS如何把一张横向的长图变成竖向的?
前言: 有时候做项目过程中,设计的是一张横向的长图,但是我们需要在手机端观看的时候,也想把手机横着观看,这样视野更宽阔,如何解决这个问题呢? html <div class="imgB ...
- Photoshop给草坡上的人物加上大气的霞光
<点小图查看大图> 最终效果 1.打开原图素材大图,创建可选颜色调整图层,对红色.黄色.黑色进行调整,参数设置如图1 - 3,效果如图4.这一步减少图片中的红色,并给暗部增加蓝色. < ...