在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 相关文章推荐
自动更新作用
Oct 08 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
垃圾回收器的相关知识点总结
2018/05/13 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
《母鸡》教学反思
2014/02/25 职场文书
出生证明公证书
2014/04/09 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2014年测量员工作总结
2014/12/12 职场文书
期末个人总结范文
2015/02/13 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
SpringBoot Http远程调用的方法
2022/08/14 Java/Android