react 后端返回excel数据流

地方

1.请求接口,response响应的数据为数据流格式

2. 页面,加导出按钮

 <Button  type="primary"   onClick={handleExportExcel} > 导出 </Button>

3.写方法

         方案一:

  1. api接口中请求

  downlownExcel = (data: any, options = {}) =>
    http.post(url, data, { responseType: 'blob', ...options })

//responseType: 'blob' 必须写

      2. 方法实现

import {upload} from '@/api'

  const handleExportExcel = async () => {
    const res: any = await upload.downlownExcel()
    const blob = new Blob([res as BlobPart]) 
    const elink = document.createElement('a')  //创建a标签节点
    elink.download = `导出.xlsx`  //下载出来的名字
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob) //创建好的url   放入a 标签 href中
    document.body.appendChild(elink) //追加到body中
    elink.click() //执行a标签的点击
    window.URL.revokeObjectURL(elink.href)   //浏览器打开excel文件
  }

        方案二:

直接在请求接口中打开

exportOrder(data: any) {
   http.post('url', data).then((res: any) => {
      const aNode = document.createElement('a')
      aNode.setAttribute('download', '')
      aNode.setAttribute('href', '需要你get的excel表的地址' + 
      res.download_url) // href链接
      aNode.click()
   })
}

最后欢迎大家提出宝贵意见

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值