java导出的文件流前端处理方式

1、安装xlsx和file-saver库

npm install xlsx file-saver

 2、创建一个处理导出excel的函数（模拟后端返回的excel文件流）

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

const handleExportExcel = (response, fileName) => {
  const contentType = response.headers['content-type'];
  const blob = new Blob([response.data], { type: contentType });
  const fileData = new File([blob], fileName, { type: contentType });
  FileSaver.saveAs(fileData, fileName);
};

 3、处理结果

import React, { useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [loading, setLoading] = useState(false);

  const handleExportClick = async () => {
    setLoading(true);
    try {
      const response = await axios({
        url: '/api/export',
        method: 'GET',
        responseType: 'blob'
      });
      handleExportExcel(response, 'myExcelFile.xlsx');
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleExportClick} disabled={loading}>
      {loading ? 'Exporting...' : 'Export to Excel'}
    </button>
  );
};

后端返回样式示例