专栏首页hbbliyong前端axios下载excel,并解决axios返回header无法获取所有数据的问题

前端axios下载excel,并解决axios返回header无法获取所有数据的问题

需求:通过后端接口下载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对象 
 })

ps:在下载的过程中,会有一个文件名的问题;这里后端把它放到了header里面,但是axios的res.header并不能获取:

而浏览器中是这样的

最后找到了解决方法: 只需要在服务器端header里面设置

Access-Control-Expose-Headers: Content-Disposition

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C#基础知识回顾--BackgroundWorker介绍

    简介 BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作。耗时的操作(如下载和数据库事务)在长时间...

    hbbliyong
  • 看到他我一下子就悟了---委托

    看到大家的留言,我想说下我对委托的了解,首先看它的定义: 委托 就是将方法作为方法的参数 不用先看例子什么的,你就多品味品味这句话,然后你看下使用委托的步骤, ...

    hbbliyong
  • [译]WebAPI下的如何实现参数绑定

    本文将概述在WebAPI方式下将如何将参数绑定到一个action方法,包括参数是如何被读取,一系列规则决定特定环境采用的那种绑定方式,文章最后将给出一些实际的例...

    hbbliyong
  • 问题:单片机软件仿真和实际运行速度不一样?

    如图,问题大概就是说初学单片机,用软件仿真出来的程序,在开发板上运行的效果比仿真的快,晶振都是一样的12M。还问到一个1T模式和12T模式的区别?

    单片机技术宅
  • Kafka-11.设计-日志压缩

    日志压缩可以保证Kafka总是最少保留单个主题分区的数据日志中的每个消息的key的最后的已知值。(Log compaction ensures that Kaf...

    悠扬前奏
  • CRM WebClient UI页面的跳转处理

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • STM8S——Universal asynchronous receiver transmitter (UART)

    UART基本介绍: 通用异步收发器UART他的功能非常强大 我们只使用UART的全双工异步通信功能,使用中断接收数据。 UART_RX:串行数据输入。 UART...

    Christal_R
  • 企业网络被DDoS攻击了,该怎么办?

    为什么会这样呢?很有可能是被黑客攻击并向你勒索赎金,更可怕的一种可能是:竞争对手耍下三滥手段,恶意攻击你的服务器,影响你公司的运营,试图战胜你。

    墨者安全科技
  • 【作业】结对编程纪实

    在Graph类上,我们封装了SimpleChainModel和WordChainModel两个类,用于对图论的构图,计算,数据调度等行为进行底层封装。

    HansBug
  • Go或者C中调用Lua业务脚本,实现终端应用的热更新机制

    随着5G网络的普及,大胆预测下未来终端架构发展的两个方向,终端设备功能将会更加的强大和智能。

    特立独行的猫a

扫码关注云+社区

领取腾讯云代金券