功能:点击导出按钮,提交请求,下载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. 2018-07-10 为Chrome和火狐浏览器编写扩展

    由于扩展标准的逐渐一致, 现在同一扩展代码库已经有可能同时用于Chrome和火狐. 下面是一个简单的工具栏按钮和弹窗(尚无任何实际功能): 代码库地址: nobodxbodon/suan1 所有代码: ...

  2. arcgis api 4.x for js之基础地图篇

    arcgis api3.x for js转向arcgis api4.x,我也是最近的3-4个月时间的事情,刚好公司有个webgis项目需要展示三维场景,项目选择arcgis api4.x.我纯碎记录一 ...

  3. TCP点对点转发的实现与原理(nodejs)

    Nagent Nagent是TCP点对点转发实现,名称来源于Nat与Agent的组合.类似frp项目,可以在局域网与互联网提供桥梁. 前提是你要有一台流量服务器并且有一个公网IP.如果没有,也可以找服 ...

  4. Excel自定义公式,类似VLOOKUP的查询

    Excel在使用VLOOKUP时,当检索值超过255长度的时候就会报错,没法正常检索. 官方提供的办法是通过INDEX和MATCH公式组合使用来解决. 微软官方方案 1,公式 =INDEX($A$5: ...

  5. 免费了 -- EXCEL插件 智表ZCELL 普及版V1.0 发布了!!!

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  6. SQL AVG 函数

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

  7. 转://从一条巨慢SQL看基于Oracle的SQL优化

    http://mp.weixin.qq.com/s/DkIPwbDKIjH2FMN13GkT4w 本次分享的内容是基于Oracle的SQL优化,以一条巨慢的SQL为例,从快速解读SQL执行计划.如何从 ...

  8. 突击战 (uva 11729)贪心

    思路:就是把J大的放在前面.为什么这样贪心呢? 看看这个图 #include<iostream> #include<algorithm> #include<vector& ...

  9. Scala--控制结构和函数

    一.条件表达式 val s = if(x > 1) 1 else -1 s 可以是 val var s = 0 if(x > 1) s = 1 else s = -1 s 必须是 var ...

  10. LOJ #6042. 「雅礼集训 2017 Day7」跳蚤王国的宰相

    我可以大喊一声这就是个思博题吗? 首先如果你能快速把握题目的意思后,就会发现题目就是让你求出每个点要成为树的重心至少要嫁接多少边 先说一个显然的结论,重心的答案为\(0\)(废话) 然后我们考虑贪心处 ...