在vue中使用axios实现post方式获取二进制流下载文件(实例代码)


Posted in Javascript onDecember 16, 2019

需求

点击导出下载表格对应的excel文件

在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api

实现

第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流

responseType: 'blob'

第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能

let blob = res.data
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
 let a = document.createElement('a')
 a.download = fileName
 a.href = e.target.result
 document.body.appendChild(a)
 a.click()
 document.body.removeChild(a)
}

问题

使用 axios 会出现无法拿到 java 后端给出的 Content-Disposition 中的文件名

注意的是,浏览器中可以看到header中有信息,但是无法通过 axios 的 res.header 获取到

在vue中使用axios实现post方式获取二进制流下载文件(实例代码) 

这种情况需要后端设置 header

Access-Control-Expose-Headers: Content-Disposition

有可能后端加了之后还是获取不到,那么让后端单独加一个fileName字段即可

response.setContentType("multipart/form-data");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-disposition", "attachment;filename=" + UUID.randomUUID().toString() + ".xlsx");
response.setHeader("FileName", UUID.randomUUID().toString() + ".xlsx");
response.setHeader("Access-Control-Expose-Headers", "FileName")

总结

完整的 axios 代码

axios.post({
 url:`url`,
 method:`post`,
 responseType: 'blob'
}).then(res => {
 let blob = res.data
 let reader = new FileReader()
 reader.readAsDataURL(blob)
 reader.onload = (e) => {
  let a = document.createElement('a')
  a.download = `fileName.xlsx`
  a.href = e.target.result
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
 }
})

ps:vue-axios的使用方法(简单易懂)

1.vue-axios插件的安装

使用 npm:

$ cnpm install axios

2.在main.js中添加(添加到原型链上)

import axios from 'axios';
Vue.prototype.axios = axios;

完活,然后就可以随便在任何组件开始用了,耶!^-^!

例子:

this.axios.post('http://ai.yiche.com/web/ability/nlu/standardTokenizer', {
     "text": "动效如果有跟评审结论有出入的地方或者不清楚的地方,随时沟通哈~"
    }).then(function(res) {
     console.log(res.data);
    }).catch(function(err) {
     if (err.response) {
      console.log(err.response)
     }
    });

以上所述是小编给大家介绍的在vue中使用axios实现post方式获取二进制流下载文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python中 * 的用法详解
2019/07/10 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
管理工程专业求职信
2014/08/10 职场文书
个园导游词
2015/02/04 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
python入门学习关于for else的特殊特性讲解
2021/11/20 Python