AntDesign Blazor 表格数据导出方案详解

前言

在使用 AntDesign Blazor 进行企业级应用开发时，数据导出功能是常见的业务需求。本文将详细介绍如何为 AntDesign Blazor 的 Table 组件实现 CSV 和 Excel 导出功能，帮助开发者快速掌握这一实用技能。

核心思路

AntDesign Blazor 本身专注于 UI 组件的实现，数据导出功能需要结合其他专业库来实现。整体方案分为两个关键部分：

1. 数据处理层：使用专业库（如 CsvHelper 或 ClosedXML）处理数据转换
2. 文件下载层：通过 JavaScript 互操作实现浏览器端的文件下载

具体实现方案

1. 浏览器端文件下载机制

在 Blazor WebAssembly 中，需要通过 JavaScript 互操作实现文件下载功能。核心原理是创建一个内存中的 Blob 对象，然后模拟点击隐藏的 <a> 标签触发下载。

window.downloadFileFromStream = async (fileName, contentStreamReference) => {
  const arrayBuffer = await contentStreamReference.arrayBuffer();
  const blob = new Blob([arrayBuffer]);
  const url = URL.createObjectURL(blob);
  const anchorElement = document.createElement('a');
  anchorElement.href = url;
  anchorElement.download = fileName ?? '';
  anchorElement.click();
  anchorElement.remove();
  URL.revokeObjectURL(url);
}

对应的 C# 封装方法：

public static async Task<bool> ExportFromStreamAsync(this IJSRuntime js, Stream stream, string fullFilename)
{
    try
    {
        using var streamRef = new DotNetStreamReference(stream);
        await js.InvokeVoidAsync("downloadFileFromStream", fullFilename, streamRef);
        return true;
    }
    catch
    {
        return false;
    }
}

2. CSV 导出实现

使用 CsvHelper 库可以方便地生成 CSV 文件。首先需要定义数据模型与 CSV 列的映射关系：

public sealed class MyRowMap : ClassMap<MyRow>
{
    public MyRowMap()
    {
        Map(m => m.Id).Index(0).Name("ID");
        Map(m => m.Name).Index(1).Name("名称");
    }
}

然后封装导出方法：

public static async Task<bool> ExportAsCsvAsync<TRow, TRowMap>(this IJSRuntime js, 
    IEnumerable<TRow> rows, string filename)
    where TRowMap : ClassMap<TRow>
{
    using var stream = new MemoryStream();
    using var sw = new StreamWriter(stream, Encoding.UTF8);
    
    using (var csv = new CsvWriter(sw, culture: CultureInfo.InvariantCulture, leaveOpen: true))
    {
        csv.Context.RegisterClassMap<TRowMap>();
        csv.WriteHeader<TRow>();
        csv.NextRecord();
        await csv.WriteRecordsAsync(rows);
    }
    
    stream.Seek(0, SeekOrigin.Begin);
    return await js.ExportFromStreamAsync(stream, $"{filename}.csv");
}

3. Excel 导出实现

类似地，可以使用 ClosedXML 库实现 Excel 导出：

public static async Task<bool> ExportAsExcelAsync<TRow>(this IJSRuntime js, 
    IEnumerable<TRow> rows, string filename)
{
    using var stream = new MemoryStream();
    using var workbook = new XLWorkbook();
    var worksheet = workbook.Worksheets.Add("Sheet1");
    
    // 添加表头
    var properties = typeof(TRow).GetProperties();
    for (int i = 0; i < properties.Length; i++)
    {
        worksheet.Cell(1, i + 1).Value = properties[i].Name;
    }
    
    // 添加数据行
    int rowNum = 2;
    foreach (var row in rows)
    {
        for (int i = 0; i < properties.Length; i++)
        {
            worksheet.Cell(rowNum, i + 1).Value = properties[i].GetValue(row)?.ToString();
        }
        rowNum++;
    }
    
    workbook.SaveAs(stream);
    stream.Seek(0, SeekOrigin.Begin);
    return await js.ExportFromStreamAsync(stream, $"{filename}.xlsx");
}

性能优化建议

1. 大数据量处理：当数据量较大时，建议采用分页或分批处理的方式，避免内存溢出
2. 服务端导出：对于超大数据集，考虑在服务端生成文件后提供下载链接
3. 进度反馈：添加加载指示器和进度反馈，提升用户体验

未来展望

AntDesign Blazor 团队正在考虑为 Table 组件提供更友好的数据导出 API，使开发者能够更方便地扩展各种导出格式。社区也可以基于这些 API 开发专门的导出插件，形成更丰富的生态系统。

结语

通过本文介绍的方法，开发者可以轻松为 AntDesign Blazor 的 Table 组件添加数据导出功能。这种解耦的设计既保持了组件的简洁性，又提供了足够的灵活性来满足各种业务场景的需求。