
如何在 Blazor 中導出到 CSV
今天,我們要深入了解如何使用Blazor和IronXL將Excel檔案轉換為CSV格式。 在本教程的最後,您將能夠建立一個基本的Blazor應用程式,以不同格式匯出Excel資料,包括CSV。
IronXL簡介
IronXL是一個強大的.NET Excel程式庫,設計用來處理各種格式的Excel檔案,包括XLS, XLSX, XLSM, XLTX和CSV。它允許開發者以程式化方式讀取、寫入和操控Excel資料,而無需使用Microsoft Office或Excel Interop。
使用IronXL,您可以建立、載入和儲存Excel工作簿,以及讀取和寫入個別儲存格或範圍的資料。 它還支持進階功能,如格式化、公式、圖表和樞紐分析表。 IronXL相容各種.NET Framework,並可與C#和VB.NET等流行語言一起使用。
將Excel檔案轉換為CSV的步驟
設定您的Blazor專案
首先,您需要建立一個新的Blazor Server專案。 打開Visual Studio,建立一個新專案並選擇"Blazor Server App"範本。 命名您的專案,然後點擊"建立"。
建立專案後,打開Pages資料夾並找到Index.razor檔案。這是新增和編寫Blazor元件以處理文件上傳和轉換的地方。
安裝IronXL
在開始撰寫程式碼之前,必須安裝IronXL程式庫。 在Visual Studio中打開套件管理器主控台,並執行以下命令:
此命令將在您的Blazor專案中安裝IronXL程式庫。 現在您可以開始撰寫程式碼了!
建立文件上傳元件
首先,建立一個基本的文件上傳元件,允許使用者上傳現有的Excel檔案。接著,從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>
此程式碼設置文件上傳元件,包含按鈕和資訊區域,以顯示文件轉換的狀態。 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}";
}
}
}
此程式碼定義了一個名為InputFile元件上傳Excel電子表單後會觸發該方法; Excel可以是XLS或XLSX格式。 該程式碼讀取已上傳的基本Excel文件,將其載入到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}";
}
}
}
讓我們進一步解析程式碼:
- 當文件被上傳時,會觸發
InputFileChangeEventArgs物件給它。 此物件包含有關上傳文件的資訊,如其名稱和大小。 - 在名為
originalFileName的變數中儲存原始文件名,以在頁面上顯示它。 - 在一個try-catch區塊中,建立一個新的
MemoryStream物件來讀取上傳文件的內容。 using語句確保在不再需要時正確釋放記憶體流。 - 使用
await關鍵字將上傳文件的內容非同步地複製到記憶體流中。 這確保在讀取文件時應用程式保持響應。 - 接下來,使用
WorkBook物件中。 該物件代表整個Excel工作簿,包括其工作表、儲存格和資料。 - 然後,為轉換後的CSV檔案指定一個輸出文件名。在此情況下,我們使用名稱"sample.csv"。
- 然後使用
WorkBook物件的SaveAsCsv方法,以指定的輸出文件名將工作簿儲存為CSV檔案。 - 如果轉換成功,將顯示一條資訊以表示轉換已完成。 如果出現錯誤,則捕獲異常並顯示錯誤資訊。
測試應用程式
既然Blazor應用程式已完成,是時候測試它了! 按F5在Visual Studio中運行您的應用程式。 當應用程式運行時,您應該會在頁面上看到一個文件上傳按鈕。
運行Blazor應用程式
單擊該按鈕,然後選擇一個Excel文件上傳。 在InputFile元件的接受屬性中列出了接受的文件格式。
選擇一個Excel文件
選擇文件後,應用程式將讀取該文件,使用IronXL將其轉換為CSV格式,並以指定的輸出文件名儲存轉換後的文件。 您應該會看到一條消息,指示轉換的狀態以及原始文件名。
轉換狀態
恭喜! 您已成功構建了一個Blazor應用程式,能夠使用IronXL將Excel文件匯出為CSV格式。 以下截圖顯示了上述程式的輸出。
輸出的Excel文件
結論
此教程演示了如何構建一個Blazor應用程式,能夠使用IronXL將Excel文件匯出為CSV格式。 我們展示了如何建立文件上傳元件,處理文件上傳,並使用IronXL的強大功能將Excel文件轉換為CSV格式。
通過將IronXL整合到您的Blazor應用程式中,您可以輕鬆處理各種與Excel相關的任務,例如匯入、操控和匯出資料。 這為您的專案開辟了廣泛的可能性,並幫助您為使用者提供更豐富的體驗。 您可以在Blazor中使用IronXL程式庫將CSV轉換為Excel。
IronXL提供免費試用,允許您在購買之前測試其功能和能力。 試用期結束後,IronXL的授權價格從$999開始。

Curtis Chau擁有Carleton大學的電腦科學學士學位,專精於前端開發,擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面,喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。
相關文章



