在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版网站风格切换实例代码
Oct 06 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
javascript中clone对象详解
Dec 03 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
详解javascript函数的参数
2015/11/10 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
numpy数组之存取文件的实现示例
2019/05/24 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
基于Django实现日志记录报错信息
2019/12/17 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
报到证丢失证明
2014/01/11 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
公司担保书格式范文
2014/05/12 职场文书
骨干教师事迹材料
2014/12/17 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
运动会三级跳加油稿
2015/07/21 职场文书