功能:点击导出按钮,提交请求,下载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. 倒计时5S秒自动关闭弹窗

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 弹性布局 - flex对齐

    flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的. 主轴 justify-content   justify-content对齐方式共有5种对齐方 ...

  3. git在本地向远程仓库创建分支

    在本地的仓库种,如果想给upstream创建新分支并关联,需要执行 git push -u/--set-upstream 远程仓库名 远程分支名

  4. Kubernetes入门-集群安装

    Kubernetes是谷歌开源的容器集群编排平台,是一个完备的分布式系统支撑平台,为容器化应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,具有强大的故障发现和自我修复机制.服务滚动升级 ...

  5. PostgreSQL10.1 linux 编译安装

    一 安装准备 1.首先从官网下载PostgreSQL压缩包(也可以使用yum安装),我们这里使用的是10.1的版本 2.将文件上传到linux服务区目录(我们这里放在/root 中) 3.解压缩 ta ...

  6. Docker之初识(一)

    1.简介 今年四月份公司逐步改用docker容器来部署应用,当时自己刚踏出学校大门,平时开发都是环境都是早已安装好,因此一直没怎么了解Docker这玩意.公司里各位开发大佬说这是个好东西,可以很方便的 ...

  7. idea中Springcloud同时运行多个模块、微服务

    idea中有个窗口叫做 Run DashBoard 在这里可以管理多个模块的启停,这个面板一般情况下是关闭的打开Run DashBoard面板 在工程的.idea中找到workspace.xml,并找 ...

  8. Linux学习-汇总

    1.基础linux学习 Linux-基础学习(一)-基本命令 Linux-基础学习(二)-基本部署 Linux-基础学习(三)-Nginx学习 Linux-基础学习(四)-部署图书管理系统项目 Lin ...

  9. Cleartext HTTP traffic to xxx not permitted解决办法

    ,为保证用户数据和设备的安全,针对下一代 Android 系统(Android P) 的应用程序,将要求默认使用加密连接,这意味着 Android P 将禁止 App 使用所有未加密的连接,因此运行 ...

  10. 初识gauge自动化测试框架

    segmentfault阅读 官方网站:https://docs.gauge.org/latest/index.html 介绍: Gauge是一个轻量级的跨平台测试自动化工具,可以使用不同的语言中编写 ...