react 后端返回excel数据流

地方

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

react 后端返回excel数据流_第1张图片

2. 页面,加导出按钮

 

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()
   })
}

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

你可能感兴趣的:(react,react.js,后端,前端,typescript,excel)