在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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
vue - props 声明数组和对象操作
Jul 30 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 中的批处理的实现
2007/06/14 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
js 发布订阅模式的实例讲解
2017/09/10 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python避免死锁方法实例分析
2015/06/04 Python
简单理解Python中的装饰器
2015/07/31 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python使用sorted排序的方法小结
2017/07/28 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
软件测试题目
2013/02/27 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
高一英语教学反思
2014/01/22 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
白鹤梁导游词
2015/02/06 职场文书
自我评价优缺点范文
2015/03/11 职场文书
经销商会议开幕词
2016/03/04 职场文书
Python实现生活常识解答机器人
2021/06/28 Python