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 ...
随机推荐
- 浅谈C#中的for循环与foreach循环
for循环和foreach循环其实可以算得上是从属关系的,即foreach循环是可以转化成for循环,但是for循环不一定能转换成foreach循环. 下面简单介绍一下两种循环: 1.for循环 代码 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)
写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...
- WebGL或OpenGL关于模型视图投影变换的设置技巧
目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在 ...
- 基于hadoop分析,了解hive的使用
一.Hadoop理论 Hadoop是一个专为离线和大规模数据分析而设计的,并不适合那种对几个记录随机读写的在线事务处理模式. Hadoop=HDFS(文件系统,数据存储技术相关)+ Mapreduce ...
- EditText搜索关键字,返回结果匹配关键字改变颜色
自己项目 用到EditText搜索结果关键字改变颜色,就研究了一下,2种方法实现,发现一个好用的工具类,在代码中一行调用这个方法,直接实现需求. KeywordUtil.java工具类. packag ...
- 结对编程项目总结 by:陈宏伟&刘益
结对编程项目在欢快的国庆假期中也顺利结束了.从最初拿到结对编程项目的思考,再到一步一步实现,中间经历了一个漫长的过程.在我和队友的多次协商下,最终我们还是选择使用基于python来实现这一次结对编程项 ...
- MySQL 关于性能的参数配置梳理
以下List是我们常见的MySQL参数配置,这个参数对提高实例的性能大有裨益. 其中 建议设置值,仅供参考,需要根据自己的业务场景和硬件资源仔细推敲. 参数 设置说明 建议设置值 lower_case ...
- Linux学习历程——SUID、SGID、SBIT简介
一.SUID.SGID.SBIT简介 SUID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件的属主身份来执行.SGID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件 ...
- python崩溃到现在居然还没有放弃的Day07
今天新入一个全新的知识面,叫做深浅拷贝,拷贝英文名copy,俗称复制,作为一个火影迷就会想到拷贝忍者旗木卡卡西,跑题了,在所有的数据存储时,都会有内存地址和存储地址,浅拷贝只拷贝第一层的内存地址,深拷 ...
- 让自己的开源项目支持CocoaPods
测试的时候找个自己封装的方法或UI控件就可以了 这里用我刚封装的Redirect重定向的请求体为例 1, 在github上创建一个Redirect,重要:记得选择开源协议 (MIT)(如果木有GitH ...