如何在 Blazor 中導出到 CSV

設定 Blazor 項目

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

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

安裝 IronXL

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

Install-Package IronXL.Excel

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

建立文件上傳元件

首先，建立一個基本的文件上傳元件，允許使用者上傳現有的 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 檔案。

將以下程式碼新增至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 中匯出為 CSV 文件，圖 1：執行 Blazor 應用程式 運行 Blazor 應用程式

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

如何在 Blazor 中匯出為 CSV 文件，圖 2：選擇 Excel 文件 選擇一個 Excel 文件

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

如何在 Blazor 中匯出為 CSV 文件，圖 3：轉換狀態 轉換狀態

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

如何在 Blazor 中匯出為 CSV 文件，圖 4：輸出的 Excel 文件 輸出的 Excel 文件