Wie man in Blazor nach CSV exportiert

Heute zeigen wir Ihnen, wie Sie mit Blazor und IronXL eine Excel-Datei in das CSV-Format konvertieren können. Am Ende dieses Tutorials werden Sie in der Lage sein, eine einfache Blazor-Anwendung zu erstellen, die Excel-Daten in verschiedene Formate, einschließlich CSV, exportiert.

Einführung in IronXL

IronXL ist ein leistungsfähiges .NET Excel-Bibliothek entwickelt für die Arbeit mit Excel-Dateien in eine breite Palette von Formaten, einschließlich XLS, XLSX, XLSM, XLTX und CSV. Es ermöglicht Entwicklern, Excel-Daten programmatisch zu lesen, zu schreiben und zu manipulieren, ohne dass Microsoft Office oder Excel Interop erforderlich ist.

Mit IronXL können Sie Folgendes erstellen, laden und speichern Excel-Arbeitsmappensowie das Lesen und Schreiben von Daten in einzelne Zellen oder Bereiche. Es unterstützt auch erweiterte Funktionen wie formatierung, formeln, kartenund Pivot-Tabellen. IronXL ist mit verschiedenen .NET-Frameworks kompatibel und kann mit gängigen Sprachen wie C# und VB.NET verwendet werden.

Schritte zum Konvertieren von Excel-Dateien in CSV

Ihr Blazor-Projekt einrichten

Um zu beginnen, müssen Sie ein neues Blazor Server-Projekt erstellen. Öffnen Sie Visual Studio, erstellen Sie ein neues Projekt und wählen Sie die Vorlage "Blazor Server App". Benennen Sie Ihr Projekt und klicken Sie auf "Erstellen"

Sobald Ihr Projekt erstellt ist, öffnen Sie den Ordner Pages und suchen Sie die Datei Index.razor. Hier werden die Blazor-Komponenten hinzugefügt und kodiert, um Datei-Uploads und Konvertierungen zu verarbeiten.

Installation von IronXL

Bevor Sie mit dem Schreiben von Code beginnen, müssen Sie die IronXL-Bibliothek installieren. Öffnen Sie die Package Manager Console in Visual Studio und führen Sie den folgenden Befehl aus:

Install-Package IronXL.Excel

Mit diesem Befehl wird die IronXL-Bibliothek in Ihrem Blazor-Projekt installiert. Jetzt können Sie anfangen, Code zu schreiben!

Erstellen der Dateiupload-Komponente

Erstellen Sie zunächst eine einfache Datei-Upload-Komponente, mit der Benutzer eine vorhandene Excel-Datei hochladen können. Dann wird die Komponente "InputFile" aus dem Namespace "Microsoft.AspNetCore.Components.Forms" hinzugefügt. Fügen Sie den folgenden Code in die Datei Index.razor ein, unterhalb der Zeile "@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>

@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>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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>

Dieser Code richtet die Datei-Upload-Komponente ein, komplett mit einer Schaltfläche und einem Nachrichtenbereich, der den Status der Dateikonvertierung anzeigt. Das Attribut "accept" der Komponente "InputFile" gibt die akzeptierten Dateiformate an.

Schreiben des Dateikonvertierungscodes

Lassen Sie uns nun den Code schreiben, der das Hochladen und die Konvertierung der Dateien übernimmt. Zur Bewältigung dieser Aufgabe wird eine Kombination aus IronXL, Blazor und C# verwendet. Sie können IronXL verwenden, um eine CSV-Datei in eine Excel-Datei konvertieren.

Fügen Sie den folgenden Code in Ihre Datei Index.razor ein, und zwar unterhalb des Elements div, das Sie zuvor hinzugefügt haben.

@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}";
        }
    }
}

@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}";
        }
    }
}

code
If True Then
	private String originalFileName
	private String message = ""

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async Task OnInputFileChange(InputFileChangeEventArgs e)
'	{
'		var file = e.File;
'		originalFileName = file.Name;
'
'		try
'		{
'			' Read the uploaded file into a memory stream
'			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 = string.Format("An error occurred: {0}", ex.Message);
'		}
'	}
End If

Dieser Code definiert eine private Methode namens "OnInputFileChange", die ausgelöst wird, wenn ein Excel-Arbeitsblatt mit der Komponente "InputFile" hochgeladen wird; Excel kann im XLS- oder XLSX-Format vorliegen. Der Code liest die hochgeladene Excel-Basisdatei, lädt sie in eine arbeitsbuch objekt und speichert dann das "WorkBook" als CSV-Datei. Der Status der Konvertierung wird im Nachrichtenbereich auf der Seite angezeigt.

Code-Aufschlüsselung

Schauen Sie sich zunächst den vollständigen Code an:

@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}";
        }
    }
}

@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}";
        }
    }
}

page "/" [using] Microsoft.AspNetCore.Components.Forms [using] IronXL [using] System.IO [using] ReadOnly Property body() As System.Threading.Tasks(Of style)
		background-color: skyblue
End Property
	.container
	If True Then
		max-width: 800px
		margin:
		0 auto
		font-family: Arial, sans-serif
	End If

	h3
	If True Then
		margin-top: 30px
		font-size: 30px
		margin-bottom: 30px
	End If

	.button
	If True Then
		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
	End If
	span
	If True Then
		font-size: 20px
	End If
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: </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
".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" /> (Of h3) Selected File: originalFileName</h3> <h3 style="color:bisque"> [Is] File converted: (Of span) message</span></h3> </div> code
If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: </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
"@OnInputFileChange" accept=".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" /> (Of h3) Selected File: originalFileName</h3> <h3 style
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: </style> <div class="container"> <h3> File Upload</h3> <InputFile class="button" OnChange="@OnInputFileChange" accept
"button" OnChange="@OnInputFileChange" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: </style> <div class="container"> <h3> File Upload</h3> <InputFile class="button" OnChange
"container"> (Of h3) File Upload</h3> <InputFile class="button" OnChange
</style> <div class="container"> (Of h3) File Upload</h3> <InputFile class
	private String originalFileName
	private String message = ""

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async Task OnInputFileChange(InputFileChangeEventArgs e)
'	{
'		var file = e.File;
'		originalFileName = file.Name;
'
'		try
'		{
'			' Read the uploaded file into a memory stream
'			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 = string.Format("An error occurred: {0}", ex.Message);
'		}
'	}
End If

Lassen Sie uns den Code weiter aufschlüsseln:

1. Wenn eine Datei hochgeladen wird, wird die Methode "OnInputFileChange" ausgelöst und ein "InputFileChangeEventArgs"-Objekt an sie übergeben. Dieses Objekt enthält Informationen über die hochgeladene Datei, z. B. ihren Namen und ihre Größe.

2. Speichern Sie den ursprünglichen Dateinamen in einer Variablen namens originalFileName, um ihn auf der Seite anzuzeigen.

3. Erstellen Sie innerhalb eines try-catch-Blocks ein neues MemoryStream-Objekt, um den Inhalt der hochgeladenen Datei zu lesen. Die using-Anweisung stellt sicher, dass der Speicherstrom ordnungsgemäß entsorgt wird, wenn er nicht mehr benötigt wird.

4. Verwenden Sie das Schlüsselwort await, um den Inhalt der hochgeladenen Datei asynchron in den Speicherstrom zu kopieren. Dadurch wird sichergestellt, dass diese Anwendung beim Lesen der Datei ansprechbar bleibt.

5. Als nächstes wird die arbeitsbuch.laden methode wird verwendet, um den Inhalt des Speicherstroms in ein WorkBook-Objekt zu laden. Dieses Objekt stellt die gesamte Excel-Arbeitsmappe dar, einschließlich ihrer Blätter, Zellen und Daten.

6. Geben Sie dann einen Ausgabedateinamen für die konvertierte CSV-Datei an. In diesem Fall verwenden wir den Namen "sample.csv"

7. Die speichernAlsCsv methode des WorkBook-Objekts wird dann verwendet, um die Arbeitsmappe als CSV-Datei mit dem angegebenen Ausgabedateinamen zu speichern.

8. Wenn die Konvertierung erfolgreich war, wird eine Meldung angezeigt, dass die Konvertierung abgeschlossen ist. Wenn ein Fehler auftritt, fangen Sie die Ausnahme ab und geben eine Fehlermeldung aus.

Testen der Anwendung

Jetzt, wo die Blazor-Anwendung fertig ist, ist es an der Zeit, sie zu testen! Drücken Sie F5, um Ihre Anwendung in Visual Studio auszuführen. Sobald die Anwendung läuft, sollten Sie auf der Seite eine Schaltfläche zum Hochladen von Dateien sehen.

Ausführen der Blazor-Anwendung

Klicken Sie auf die Schaltfläche, und wählen Sie eine Excel-Datei zum Hochladen aus. Die akzeptierten Dateiformate sind im accept-Attribut der Komponente InputFile aufgeführt.

Wählen Sie eine Excel-Datei

Nachdem Sie eine Datei ausgewählt haben, liest die Anwendung die Datei, konvertiert sie mit IronXL in ein CSV-Format und speichert die konvertierte Datei unter dem angegebenen Ausgabedateinamen. Sie sollten eine Meldung sehen, die den Status der Konvertierung sowie den ursprünglichen Dateinamen anzeigt.

Umwandlungsstatus

Herzlichen Glückwunsch! Sie haben erfolgreich eine Blazor-Anwendung erstellt, die mit IronXL Excel-Dateien in das CSV-Format exportieren kann. Die folgende Bildschirmabbildung zeigt die Ausgabe des obigen Programms.

Die Excel-Ausgabedatei

Schlussfolgerung

In diesem Tutorial wurde gezeigt, wie man eine Blazor-Anwendung erstellt, die mit IronXL Excel-Dateien in das CSV-Format exportieren kann. Wir haben gezeigt, wie man eine Datei-Upload-Komponente erstellt, Datei-Uploads verarbeitet und Excel-Dateien in das CSV-Format konvertiert, indem man die leistungsstarken Funktionen von IronXL nutzt.

Durch die Einbindung von IronXL in Ihre Blazor-Anwendungen können Sie eine Vielzahl von Excel-bezogenen Aufgaben, wie z. B. den Import, die Bearbeitung und den Export von Daten, problemlos erledigen. Dies eröffnet eine breite Palette von Möglichkeiten für Ihre Projekte und hilft Ihnen, Ihren Nutzern ein besseres Erlebnis zu bieten. Sie können cSV in Excel konvertieren in Blazor unter Verwendung der IronXL-Bibliothek.

IronXL bietet eine kostenloser Testso können Sie die Funktionen und Möglichkeiten des Geräts testen, bevor Sie sich zum Kauf verpflichten. Nach der Testphase beginnen die Lizenzen für IronXL bei $749.