后端返回文件流，前端实现点击按钮自动导出Excel文件

首先封装接口，此接口需要传Excel目标数据中的主键id，注意要加上responseType: 'blob'

import request from '@/utils/request';
const prefix = xxxxx + '/test';

export async function exportExcel(id: any) {
  return request(prefix + '/export-excel/' + id,{
    method: 'GET',
    responseType: 'blob'
  })
}

JS部分（如果后端返回文件流，以下代码基本通用，区别在接口名、传值和定义文件名称）

import { exportExcel } from '@/services' //引入接口

const getExcel = async (id: any) => {
  // 调接口，传id，返回文件流
  const res = await exportExcel(id);

  // 将文件流转成Blob格式，类型为xlsx，若不确定格式，type可改为'application/octet-stream'
  const blob = new Blob([res], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });
  console.log(blob, 'blobv');
  const url = window.URL.createObjectURL(blob);

  // 创建一个 a 标签并设置其属性
  const link = document.createElement('a');
  link.href = url;
  link.download = 'ExcelName.xlsx';

  // 模拟用户点击下载链接
  document.body.appendChild(link);
  link.click();

  // 移除链接
  document.body.removeChild(link);

  // 释放资源
  window.URL.revokeObjectURL(url);
};

 最后，给按钮绑定点击事件，传主键id，即可实现自动下载Excel文件

<Button onClick={() => getExcel(data.id)}>
  导出
</Button>

效果图：