Web应用中Excel导出功能的最佳实践：后端生成与前端处理的权衡

// 假设这是一个ASP.NET Core Controller方法
[HttpGet("export-excel")]
public IActionResult ExportDataToExcel([FromQuery] ExportRequestModel request)
{
    // 1. 根据请求参数从数据库获取数据
    var data = _dataService.GetExportData(request); // 假设返回 List<YourDataObject>

    // 2. 使用Excel库创建工作簿
    // 例如：IWorkbook workbook = new XSSFWorkbook(); // NPOI for .xlsx
    // 或：XLWorkbook workbook = new XLWorkbook(); // ClosedXML

    // IWorkbook workbook = new XSSFWorkbook(); // 示例使用NPOI

    // 3. 创建工作表
    // ISheet sheet = workbook.CreateSheet("Sheet1");

    // 4. 填充表头
    // IRow headerRow = sheet.CreateRow(0);
    // headerRow.CreateCell(0).SetCellValue("姓名");
    // headerRow.CreateCell(1).SetCellValue("年龄");
    // ...

    // 5. 遍历数据并填充内容
    // int rowNum = 1;
    // foreach (var item in data)
    // {
    //     IRow dataRow = sheet.CreateRow(rowNum++);
    //     dataRow.CreateCell(0).SetCellValue($"{item.Name.FirstName} {item.Name.LastName}"); // 扁平化处理
    //     dataRow.CreateCell(1).SetCellValue(item.Age);
    //     // ... 其他字段
    // }

    // 6. 将工作簿写入内存流
    // MemoryStream stream = new MemoryStream();
    // workbook.Write(stream);
    // stream.Position = 0;

    // 7. 设置HTTP响应头并返回文件
    // return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "ExportedData.xlsx");

    // 实际代码会更复杂，包含错误处理、资源释放等
    // 这里仅为示意，实际请参照所选库的官方文档
    return Ok("Excel file generation logic goes here.");
}

import React from 'react';

const ExcelExportComponent = () => {

  const handleExportClick = async () => {
    try {
      // 1. 发起HTTP GET请求到后端API
      const response = await fetch('/api/export-excel', {
        method: 'GET',
        // 如果需要认证，添加Authorization头
        headers: {
          'Authorization': 'Bearer your_auth_token',
          // 根据后端Content-Type设置Accept头，这里通常不需要
        },
      });

      // 2. 检查响应状态
      if (!response.ok) {
        // 处理HTTP错误，例如404, 500等
        const errorText = await response.text();
        throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorText}`);
      }

      // 3. 将响应体转换为Blob对象
      const blob = await response.blob();

      // 4. 创建一个URL，指向Blob对象
      const url = window.URL.createObjectURL(blob);

      // 5. 创建一个隐藏的a标签，并模拟点击下载
      const a = document.createElement('a');
      a.href = url;
      a.download = 'exported_data.xlsx'; // 设置下载文件名
      document.body.appendChild(a); // 必须添加到DOM中才能点击
      a.click(); // 模拟点击
      document.body.removeChild(a); // 移除a标签

      // 6. 释放URL对象，避免内存泄漏
      window.URL.revokeObjectURL(url);

      console.log('Excel file downloaded successfully!');

    } catch (error) {
      console.error('Error downloading Excel file:', error);
      // 向用户显示错误提示
      alert('导出Excel失败，请稍后再试。');
    }
  };

  return (
    <button onClick={handleExportClick}>
      导出Excel
    </button>
  );
};

export default ExcelExportComponent;