前端axios下载excel文件(二进制)的处理方法


Posted in Javascript onJuly 31, 2018

需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件

实现:axios(ajax类似)

主要代码:

axios:设置返回数据格式为blob或者arraybuffer

如:

var instance = axios.creat({     ... //一些配置
    responseType: 'blob', //返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json
  })

请求时的处理:

getExcel().then(res => {
  //这里res.data是返回的blob对象   
  
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
  
var downloadElement = document.createElement('a');
  
var href = window.URL.createObjectURL(blob); //创建下载的链接
  
downloadElement.href = href;
  
downloadElement.download = 'xxx.xlsx'; //下载后文件名
  
document.body.appendChild(downloadElement);
  
downloadElement.click(); //点击下载
  
document.body.removeChild(downloadElement); //下载完成移除元素
  
window.URL.revokeObjectURL(href); //释放掉blob对象 
 })

总结

以上所述是小编给大家介绍的前端axios下载excel文件(二进制)的处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 #Javascript
vue导出html、word和pdf的实现代码
Jul 31 #Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 #Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 #Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
如何做到多笔资料的同步
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python冲顶大会 快来答题!
2018/01/17 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
财务管理专业求职信
2014/06/11 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android