如何在 Blazor 中导出到 CSV

设置您的Blazor项目

首先，您需要创建一个新的Blazor服务器项目。 打开Visual Studio，创建一个新项目并选择"Blazor Server App"模板。 给项目命名，然后点击"创建"。

项目创建完成后，打开Pages文件夹并找到Index.razor文件。这是添加和编写Blazor组件以处理文件上传和转换的地方。

安装IronXL

在开始编写代码之前，有必要安装IronXL库。 在Visual Studio中打开Package Manager Console，并运行以下命令：

Install-Package IronXL.Excel

此命令将在您的Blazor项目中安装IronXL库。 现在您可以开始编写代码了！

创建文件上传组件

首先，创建一个基本的文件上传组件，允许用户上传现有的Excel文件。然后，InputFile组件是从Microsoft.AspNetCore.Components.Forms命名空间中添加的。 将以下代码添加到您的Index.razor文件中，位于"@page """"行下方：

@using Microsoft.AspNetCore.Components.Forms
@using IronXL
@using System.IO
@using System.Threading.Tasks

<div class="container">
    <h3>File Upload</h3>

    <InputFile class="button" OnChange="@OnInputFileChange" accept=".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" />
    <h3>Selected File: @originalFileName</h3>
    <h3 style="color:bisque">Is File converted: <span>@message</span></h3>
</div>

此代码设置了文件上传组件，配有按钮和消息区域以显示文件转换的状态。 InputFile组件上的accept属性指定接受的文件格式。

编写文件转换代码

现在，让我们编写用于处理文件上传和转换的代码。 此任务将使用IronXL、Blazor和C#的组合来完成。 您可以使用IronXL将CSV转换为Excel文件。

将以下代码添加到您的Index.razor文件中，位于您之前添加的div元素的下方。

@code {
    private string originalFileName;
    private string message = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var file = e.File;
        originalFileName = file.Name;

        try
        {
            // Read the uploaded file into a memory stream
            using var memoryStream = new MemoryStream();
            await file.OpenReadStream().CopyToAsync(memoryStream);

            // Load the workbook using IronXL
            WorkBook workBook = WorkBook.Load(memoryStream);

            // Save the workbook as a CSV file
            string outputPath = "sample.csv";
            workBook.SaveAsCsv(outputPath);

            message = "Conversion completed!";
        }
        catch (Exception ex)
        {
            message = $"An error occurred: {ex.Message}";
        }
    }
}

该代码定义了一个名为OnInputFileChange的私有方法，当使用InputFile组件上传Excel电子表格时将被触发； Excel文件可以是XLS或XLSX格式。 代码读取上传的基本Excel文件，将其加载到WorkBook对象中，然后将WorkBook保存为CSV文件。转换状态将在页面的消息区域显示。

代码解析

首先，查看完整代码：

@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using IronXL
@using System.IO
@using System.Threading.Tasks

<style>
    body{
        background-color: skyblue
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    h3 {
        margin-top: 30px;
        font-size: 30px;
        margin-bottom: 30px;
    }

    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 15px 0;
        cursor: pointer;
    }
    span {
        font-size: 20px;
    }
</style>

<div class="container">
    <h3>File Upload</h3>

    <InputFile class="button" OnChange="@OnInputFileChange" accept=".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" />
    <h3>Selected File: @originalFileName</h3>
    <h3 style="color:bisque">Is File converted: <span>@message</span></h3>
</div>

@code {
    private string originalFileName;
    private string message = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var file = e.File;
        originalFileName = file.Name;

        try
        {
            // Read the uploaded file into a memory stream
            using var memoryStream = new MemoryStream();
            await file.OpenReadStream().CopyToAsync(memoryStream);

            // Load the workbook using IronXL
            WorkBook workBook = WorkBook.Load(memoryStream);

            // Save the workbook as a CSV file
            string outputPath = "sample.csv";
            workBook.SaveAsCsv(outputPath);

            message = "Conversion completed!";
        }
        catch (Exception ex)
        {
            message = $"An error occurred: {ex.Message}";
        }
    }
}

让我们进一步分解代码：

1. 当文件上传时，会触发OnInputFileChange方法，并将InputFileChangeEventArgs对象传递给它。 此对象包含有关上传文件的信息，如其名称和大小。
2. 在名为originalFileName的变量中存储原始文件名，以便在页面上显示。
3. 在try-catch块中，创建一个新的MemoryStream对象来读取上传文件的内容。 using语句确保一旦不再需要，内存流将被正确释放。
4. 使用await关键字将上传文件的内容异步复制到内存流中。 这确保应用程序在读取文件时保持响应。
5. 接下来，使用WorkBook.Load方法将内存流的内容加载到WorkBook对象中。 该对象代表整个Excel工作簿，包括其工作表、单元格和数据。
6. 然后为转换后的CSV文件指定一个输出文件名。在本例中，我们使用名称"sample.csv"。
7. 然后使用WorkBook对象的SaveAsCsv方法，以指定的输出文件名将工作簿保存为CSV文件。
8. 如果转换成功，则会显示一条消息，表明转换已完成。 如果发生错误，捕获异常并显示错误消息。

测试应用程序

现在Blazor应用程序已完成，是时候测试了！ 按F5在Visual Studio中运行您的应用程序。 应用程序运行后，您应该会在页面上看到一个文件上传按钮。

运行Blazor应用程序

点击按钮，选择要上传的Excel文件。 在InputFile组件的accept属性中列出了接受的文件格式。

选择Excel文件

选择文件后，应用程序将读取文件，使用IronXL将其转换为CSV格式，并将转换后的文件保存为指定的输出文件名。 您应该会看到一条消息，指示转换状态以及原始文件名。

转换状态

祝贺您！ 您已成功构建一个可以使用IronXL将Excel文件导出为CSV格式的Blazor应用程序。 以下截图显示了上述程序的输出。

输出 Excel 文件