如何在 Blazor 中導出到 CSV

設定Blazor項目

首先，您需要建立一個新的Blazor Server 專案。 開啟 Visual Studio，建立一個新項目，然後選擇"Blazor伺服器應用程式"範本。 為你的專案命名，然後點擊"建立"。

專案建立完成後，打開Pages 資料夾並找到Razor檔案。 Blazor 元件和程式碼都新增在此處，用於處理檔案上傳和轉換。

安裝IronXL

在開始編寫程式碼之前，需要安裝IronXL函式庫。 在 Visual Studio 中開啟程式包管理器控制台，並執行以下命令：

Install-Package IronXL.Excel

此命令會將IronXL庫安裝到您的Blazor專案中。 現在你可以開始寫程式了！

建立文件上傳元件

首先，建立一個基本的文件上傳元件，允許使用者上傳現有的 Excel 檔案。然後，從 Microsoft.AspNetCore.Components.Forms 命名空間新增 InputFile 元件。 將以下程式碼加入您的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>

這段程式碼設定了檔案上傳元件，包括一個按鈕和一個訊息區域，用於顯示檔案轉換的狀態。 accept 元件上的 InputFile 屬性指定了可接受的檔案格式。

編寫檔案轉換程式碼

現在，讓我們編寫處理文件上傳和轉換的程式碼。 我們將使用IronXL、 Blazor和 C# 的組合來完成這項任務。 您可以使用IronXL將CSV 檔案轉換為 Excel 檔案。

將以下程式碼加入您的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. 然後使用SaveAsCsv物件的 WorkBook 方法將工作簿儲存為具有指定輸出檔案名稱的 CSV 檔案。
8. 如果轉換成功，則會顯示一則訊息，表示轉換已完成。 如果發生錯誤，捕獲異常並顯示錯誤訊息。

測試應用程式

Blazor應用程式已經完成，現在是時候進行測試了！ 按 F5 鍵在 Visual Studio 中執行您的應用程式。 應用程式運行後，您應該會在頁面上看到一個文件上傳按鈕。

運行Blazor應用程式

點擊按鈕，然後選擇要上傳的 Excel 檔案。 可接受的檔案格式列在 InputFile 元件的 accept 屬性中。

選擇一個 Excel 文件

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

轉換狀態

恭喜！ 您已成功建立了一個Blazor應用程序，該應用程式可以使用IronXL將 Excel 檔案匯出為 CSV 格式。 以下截圖顯示了上述程式的輸出結果。

輸出的 Excel 文件