功能:点击导出按钮,提交请求,下载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. 【20190220】HTTP-知识点整理:TCP/IP与HTTP

    TCP/IP是互联网相关的各类协议族的总称,HTTP属于它内部的一个子集. 一.TCP/TP的分层管理 1. 应用层 应用层决定了向用户提供应用服务时通信的活动.TCP/IP 协议族内预存了各类通用的 ...

  2. Git-初始化配置及SSH_key配置

    step1.安装完Git,执行检查是否安装成功:git --version step2.配置全局变量 配置完执行检查:git config --list step3.生成SSH_KEY 如果报ssh- ...

  3. asp.net的Request.ServerVariables参数说明

    Request.ServerVariables["SERVER_NAME"] '获取服务器IPRequest.ServerVariables["HTTP_REFERER& ...

  4. VS2017内存占用高

    我的环境和硬件参数 说明:本篇所提到的方法在我的机器上经过设置是能明显改善卡顿的,但可能你的VS卡顿的原因不一定是本文所提到的,可以通过排除法找到问题所在. 我的环境和硬件参数: vs 2017 pr ...

  5. svn + nginx unit + python3自动化发布web服务方法

    本周将python web服务管理更换成nginx unit以后发现接口性能有了明显的提升,访问速度快了不少.不过有个很大的问题就是使用svn自动化发布以后,服务并没有刷新使用新的代码运行,而又不懂得 ...

  6. June. 25th 2018, Week 26th. Monday

    Change in all things is sweet. 有改变就会有美好. From Aristole. Change is always good, but embracing change ...

  7. 从Linux 与 Unix 异同,看开源世界的发展!

    从Linux 与 Unix 异同,看开源世界的发展! 如果你是一名20多岁或30多岁的软件开发人员,那么你已成长在一个由Linux主导的世界中.数十年来,它一直是数据中心的重要参与者,尽管很难找到明确 ...

  8. Host Only、NAT和Bridge三种网络连接

    Host Only.NAT和Bridge三种网络连接 在安装好了Linux镜像之后,如何连接物理机和虚拟机呢?这就需要网络连接,网络连接有三种:HostOnly.NAT.Bridge,它们都可用于Gu ...

  9. handsontable合并表头

    想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 ...

  10. Bloom Filter(布隆过滤器)如何解决缓存穿透

    本文摘抄自我的微信公众号"程序员柯南",欢迎关注!原文阅读 缓存穿透是什么? 关于缓存穿透,简单来说就是系统处理了大量不存在的数据查询.正常的使用缓存流程大致是,数据查询先进行缓存 ...