功能:点击导出按钮,提交请求,下载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实现文件下载的更多相关文章

  1. vue+axios+springboot文件下载

    //前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...

  2. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  3. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  4. Vue + axios + SpringBoot 2实现导出Excel

    Vue + axios + SpringBoot 2实现导出Excel 1. 前端js代码-发送Http请求 /** * 文件下载 * @param url 下载地址 * @param fileNam ...

  5. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  6. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  7. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  8. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  9. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

随机推荐

  1. 浅谈C#中的for循环与foreach循环

    for循环和foreach循环其实可以算得上是从属关系的,即foreach循环是可以转化成for循环,但是for循环不一定能转换成foreach循环. 下面简单介绍一下两种循环: 1.for循环 代码 ...

  2. 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  3. WebGL或OpenGL关于模型视图投影变换的设置技巧

    目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在 ...

  4. 基于hadoop分析,了解hive的使用

    一.Hadoop理论 Hadoop是一个专为离线和大规模数据分析而设计的,并不适合那种对几个记录随机读写的在线事务处理模式. Hadoop=HDFS(文件系统,数据存储技术相关)+ Mapreduce ...

  5. EditText搜索关键字,返回结果匹配关键字改变颜色

    自己项目 用到EditText搜索结果关键字改变颜色,就研究了一下,2种方法实现,发现一个好用的工具类,在代码中一行调用这个方法,直接实现需求. KeywordUtil.java工具类. packag ...

  6. 结对编程项目总结 by:陈宏伟&刘益

    结对编程项目在欢快的国庆假期中也顺利结束了.从最初拿到结对编程项目的思考,再到一步一步实现,中间经历了一个漫长的过程.在我和队友的多次协商下,最终我们还是选择使用基于python来实现这一次结对编程项 ...

  7. MySQL 关于性能的参数配置梳理

    以下List是我们常见的MySQL参数配置,这个参数对提高实例的性能大有裨益. 其中 建议设置值,仅供参考,需要根据自己的业务场景和硬件资源仔细推敲. 参数 设置说明 建议设置值 lower_case ...

  8. Linux学习历程——SUID、SGID、SBIT简介

    一.SUID.SGID.SBIT简介 SUID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件的属主身份来执行.SGID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件 ...

  9. python崩溃到现在居然还没有放弃的Day07

    今天新入一个全新的知识面,叫做深浅拷贝,拷贝英文名copy,俗称复制,作为一个火影迷就会想到拷贝忍者旗木卡卡西,跑题了,在所有的数据存储时,都会有内存地址和存储地址,浅拷贝只拷贝第一层的内存地址,深拷 ...

  10. 让自己的开源项目支持CocoaPods

    测试的时候找个自己封装的方法或UI控件就可以了 这里用我刚封装的Redirect重定向的请求体为例 1, 在github上创建一个Redirect,重要:记得选择开源协议 (MIT)(如果木有GitH ...