在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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
JS数组方法slice()用法实例分析
Jan 18 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代码优化及php相关问题总结
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
pycharm安装图文教程
2017/05/02 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
医院辞职信范文
2014/01/17 职场文书
保密协议书范本
2014/04/22 职场文书
优质服务口号
2014/06/11 职场文书
甘南现象心得体会
2014/09/11 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL