vue+axios实现post文件下载
人气:0功能:点击导出按钮,提交请求,下载excel文件;
这里是axios的post方法。get方法请点击这里=》here
第一步:跟后端童鞋确认交付的接口的response header设置了
以及返回了文件流。
第二步:修改axios请求的responseType为blob,以post请求为例:
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为插件使用详解
- vue下axios拦截器token刷新机制的实例代码
- Vue学习之axios的使用方法实例分析
- vue 对axios get pust put delete封装的实例代码
- Vue axios 将传递的json数据转为form data的例子
- Vue 设置axios请求格式为form-data的操作步骤
- 关于Vue中axios的封装实例详解
- vue中axios的二次封装实例讲解
- vue + axios get下载文件功能
- Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
- vue简单封装axios插件和接口的统一管理操作示例
加载全部内容