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 ...
随机推荐
- SharePoint中你不知道的图片库(实战)
分享人:广州华软 无名 一. 前言 以前,在门户网站放一个图片幻灯片时,除了要自己开发实现外,还需要处理上传图片的大小,但在SharePoint中,使用图片库,无需花费时间和精力,就能马上实现. 二. ...
- MyBatis Generator 生成器把其他数据库的同名表生成下来的问题
[问题] 使用MyBatis Generator生成器时,发现Mapper文件中出现字段与连接数据库不符,经过查找发现该表是其他数据库的同名表的字段. [解决问题] 在构造文件中,这里是generat ...
- SQL SERVER 2012 AlwaysOn– 数据库层面 02
搭建 AlwaysOn 是件非常繁琐的工作,需要从两方面考虑,操作系统层面和数据库层面,AlwaysOn 非常依赖于操作系统,域控,群集,节点等概念: DBA 不但要熟悉数据库也要熟悉操作系统的一些概 ...
- 我喜欢的vs code快捷键for mac
mac上的快捷键,尽量是像我用vs studio上靠近. cmd+K+S: 显示快捷键列 cmd+shift+p: 系统配置命令行 cmd+p:项目中文件列表,选择文件 cmd+shift+o:当前文 ...
- composer包(发布到github上)同步到Packagist
在上一篇文章里面,探讨了如何一步步建立composer包–创建你的一个composer包 创建完成后,我们需要做的就是讲自建的包发布到Packagist上.至于说什么是Packagist,这个就不用我 ...
- R语言学习——图形初阶之折线图与图形参数控制
plot()是R中为对象作图的一个泛型函数(它的输出将根据所绘制对象类型的不同而变化):plot(x,y,type="b")表示将x置于横轴,y置于纵轴,绘制点集(x,y),然后使 ...
- Day 2 下午
[POJ 3468]A Simple Problem with Integers给定Q个数A1, ..., AQ,多次进行以下操作:1.对区间[L, R]中的每个数都加n.2.求某个区间[L, R]中 ...
- 什么是 CI/CD?
什么是 CI/CD? 在软件开发中经常会提到持续集成Continuous Integration(CI)和持续交付Continuous Delivery(CD)这几个术语.但它们真正的意思是什么呢? ...
- HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
- 随心测试_软测基础_006<测试人职业发展>
接上篇:熟悉了_测试人员的工作职责范围与具体的工作内容 ,如何规划:测试人员的职业路线呢? 贴心小提示:以下内容,仅供参考,不挖坑 Q1:如何规划测试工程师的职业发展路线? A1:SX的观点:预定目标 ...