axios实现excel文件下载

js 专栏收录该内容
8 篇文章 0 订阅

axios实现excel文件下载


功能:点击导出按钮,调用接口请求数据,下载excel文件。

没有token验证时,可以采用点击a标签的方式实现excel下载,

<a href="xxx">DOWNLOAD</a>

但是项目中采用了token验证,a标签的方式就不合适了。

下面是一种可行的方案,axios实现excel文件下载:

1、确认后端提供的接口,设置了响应头response headers,

Content-disposition: attachment; filename=rzjl.xls
Content-Type: application/msexcel

并且,接口数据返回的是文件流。

2、设置axios请求的responseType为blob,以get请求为例:

axios.get(url, {
        params:{
            "startTime": 1541520000000,
            "endTime": 1541606399000
        },
        headers:{
            "Authorization":token
        },
        responseType: 'blob', //二进制流
    }).then(function (res) {
        download(res)
    }).catch(function (error) {
        console.log(error)
    });

其中url、token分别对应项目的接口url和token,如:

var url = "api/log/downExcel"

3、请求成功,拿到response后,调用下载函数
(创建a标签,设置download属性,插入到文档中并click,最后移除a标签元素,并释放blob对象)

   //下载文件
   function download(data) {
       if(!data){
           return
       }
       var blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
       var url = window.URL.createObjectURL(blob);
       var aLink = document.createElement("a");
       aLink.style.display = "none";
       aLink.href = url;
       aLink.setAttribute("download", "excel.xls");
       document.body.appendChild(aLink);
       aLink.click();
       document.body.removeChild(aLink); //下载完成移除元素
       window.URL.revokeObjectURL(url); //释放掉blob对象
   }

参考文章:
https://blog.csdn.net/MrJavaweb/article/details/80888065
https://blog.csdn.net/qq_32340877/article/details/79864462

  • 4
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值