在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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
PHP 代码规范小结
2012/03/08 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery技巧总结
2011/01/01 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
js变量提升深入理解
2016/09/16 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
微信小程序仿美团城市选择
2018/06/06 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
党员的自我评价范文
2014/01/02 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers