如何在 C# Blazor 应用程序中将数据下载为 CSV

发布：2024-10-25 15:33 阅读：18 点赞：0

CSV（逗号分隔值）文件由于其简单易用而成为数据存储和交换的流行选择。在本文中，我们将介绍在 C# 应用程序中将数据下载为 CSV 文件的步骤。

了解 CSV 文件

CSV 文件是使用特定结构以表格形式组织数据的文本文件。文件的每一行代表一条记录，每条记录由一个或多个字段组成，字段之间用逗号分隔。

使用 CSV 文件的好处

  • 简单：易于阅读和编写。
  • 互操作性：各种应用程序（Excel、数据库等）支持。
  • 轻量级：与其他格式（如 XML 或 JSON）相比开销更少。

创建一个新的 Blazor 应用

首先，在 Visual Studio 中创建一个新的 Blazor Server 或 Blazor WebAssembly 项目。

  1. 打开 Visual Studio。
  2. 创建一个新项目并选择 Blazor App。
  3. 选择 Blazor Server App（或根据您的偏好选择 Blazor WebAssembly App）。
  4. 命名项目并单击创建

定义数据模型

对于这个例子，让我们创建一个简单的模型来表示我们想要导出为 CSV 的数据。

数据模型

创建 CSV 内容

在此步骤中，我们将创建一个从数据列表生成 CSV 内容的方法。这将是一个字符串，其中每一行对应于 CSV 文件中的一行，并且对象的属性用逗号分隔。

CSV 内容

实现 CSV 下载逻辑

现在我们需要实现在 Blazor 中触发 CSV 下载的逻辑。由于 Blazor WebAssembly 无法直接访问文件系统，因此我们将使用 JavaScript 来提示下载。

步骤1.用于下载的JavaScript函数。

要么创建一个 javascript 文件作为单独的文件并将其引用添加到 _host.cshtml，要么直接在 _host.cshtml 文件中添加 javascript 文件。

function downloadFile(filename, content) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

第 2 步.创建用于 CSV 下载的 Blazor 组件。

现在，创建一个 Blazor 组件（例如，DownloadCsv.razor）并添加触发下载的逻辑。

@page "/download-csv"

<h3>Download CSV Example</h3>

<button @onclick="DownloadCsv">Download CSV</button>

@code {
    private async Task DownloadCsv()
    {
        var users = GetUsers();  // Get the data
        var csvContent = GenerateCsv(users);  // Generate CSV content

        // Call JavaScript function to download CSV
        await JS.InvokeVoidAsync("downloadFile", "users.csv", csvContent);
    }

    public string GenerateCsv(List<User> users)
    {
        var csv = new StringBuilder();
        csv.AppendLine("Id,Name,Email");

        foreach (var user in users)
        {
            csv.AppendLine($"{user.Id},{user.Name},{user.Email}");
        }

        return csv.ToString();
    }

    [Inject]
    private IJSRuntime JS { get; set; }
}
Blazor (2) 数据模型 (1) 下载 (3) JavaScript (27)