vue3+js+antd实现文件流导出功能

1、导出功能主页面

//主页面
<template>
<c-button @click="handleExport">导出</c-button>
</template>

<script setup>
import {exportList} from '@/api/otd/kaOrder'
//导出
const handleExport = () => {
  //searchValue是查询入参
  exportList(searchValue.value, '大客户订单.xlsx')
}
</script>

2、接口js文件

// 导出excel 表格
export function exportList(params,name) {
  return downBlobFile('url地址', params, name, 'POST')
}

3、文件流处理

export function downBlobFile(url, query, fileName, methods) {
  let paramsName = methods
    ? {
        url: url,
        method: methods,
        responseType: 'blob',// 指定响应类型为二进制数据
        data: query
      }
    : {
        url: url,
        method: 'get',
        responseType: 'blob',
        params: query
      }
  console.log('paramsName :>> ', paramsName)
  return request(paramsName)
    .then((response) => {
      handleBlobFile(response, fileName)// 成功时处理文件下载
    })
    .catch((error) => {
      let reader = new FileReader()
      reader.readAsText(error)// 将错误响应转为文本
      reader.onload = function (result) {
        try {
          let resData = JSON.parse(result.target.result)// 尝试解析为JSON
          console.log(resData)
          if (resData.code) {
            useMessage().error(resData.msg)// 显示后端返回的错误消息
          }
        } catch (e) {
          console.log(e)// 解析失败时打印原始错误
        }
      }
    })
}

export function handleBlobFile(response, fileName) {
  // 处理返回的文件流
  const blob = response
  if (blob && blob.size === 0) {
    useMessage().error('内容为空，无法下载')
    return
  }
  const link = document.createElement('a')
  // 兼容一下 入参不是 File Blob 类型情况
  var binaryData = []
  binaryData.push(response)// 兼容非Blob类型数据
  link.href = window.URL.createObjectURL(new Blob(binaryData))将响应数据包装成Blob对象，生成临时URL
  link.download = fileName// 设置下载文件名
  document.body.appendChild(link)
  link.click()// 模拟点击下载
  window.setTimeout(function () {
    URL.revokeObjectURL(blob)// 释放内存
    document.body.removeChild(link)// 移除DOM元素
  }, 0)
}