如何在 Blazor 中導出到 CSV

設定您的 Blazor 專案

要開始，您需要創建一個新的 Blazor 伺服器專案。 打開 Visual Studio，創建一個新專案並選擇 "Blazor 伺服器應用" 模板。 命名您的專案，然後點擊 "創建"。

創建專案後，打開 Pages 資料夾，找到 Index.razor 文件。這是添加並編碼 Blazor 組件以處理文件上傳和轉換的地方。

安裝 IronXL

在開始編寫代碼之前，有必要安裝 IronXL 庫。 在 Visual Studio 中打開 Package Manager Console 並運行以下命令：

Install-Package IronXL.Excel

此命令將在您的 Blazor 專案中安裝 IronXL 庫。 現在您可以開始編寫代碼了！

創建文件上傳組件

首先，創建一個基本的文件上傳組件，允許用戶上傳現有的 Excel 文件。然後，從 Microsoft.AspNetCore.Components.Forms 命名空間添加 InputFile 組件。 將以下代碼添加到您的 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 文件。

將以下代碼添加到您先前添加的 div 元素下方的 Index.razor 文件中。

@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. 然後使用 SaveAsCsv 方法的 WorkBook 對象將工作簿保存為具有指定輸出文件名的 CSV 文件。
8. 如果轉換成功，則顯示一條消息以表示轉換已完成。 如果出現錯誤，則捕獲異常並顯示錯誤消息。

測試應用程序

現在 Blazor 應用程序完成，可以測試它了！ 按 F5 以在 Visual Studio 中運行您的應用程序。 運行應用程序後，您應該在頁面上看到一個文件上傳按鈕。

運行 Blazor 應用程序

點擊按鈕，並選擇要上傳的 Excel 文件。 接受的文件格式已在 InputFile 組件的 accept 屬性中列出。

選擇 Excel 文件

選擇文件後，應用程序會讀取文件，使用 IronXL 將其轉換為 CSV 格式，並保存轉換後的文件並帶有指定的輸出文件名。 您應該會看到一條消息，顯示轉換的狀態以及原始文件名。

轉換狀態

恭喜！ 您已經成功構建了一個 Blazor 應用程序，可以使用 IronXL 將 Excel 文件導出為 CSV 格式。 以下截圖顯示了上述程序的輸出。

輸出 Excel 文件