Wie man zu CSV in Blazor exportiert

Einrichten Ihres Blazor-Projekts

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" aus. Benennen Sie Ihr Projekt und klicken Sie auf "Erstellen".

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

Installation von IronXL

Bevor Sie mit dem Schreiben von Code beginnen, ist es notwendig, die IronXL-Bibliothek zu installieren. Öffnen Sie die Paket-Manager-Konsole in Visual Studio und führen Sie den folgenden Befehl aus:

Install-Package IronXL.Excel

Dieser Befehl wird die IronXL-Bibliothek in Ihrem Blazor-Projekt installieren. Jetzt sind Sie bereit, Code zu schreiben!

Erstellen der Datei-Upload-Komponente

Zuerst wird eine einfache Datei-Upload-Komponente erstellt, mit der Benutzer eine vorhandene Excel-Datei hochladen können. Anschließend wird die Komponente InputFile aus dem Namespace Microsoft.AspNetCore.Components.Forms hinzugefügt. Fügen Sie folgenden Code in Ihre Index.razor-Datei ein, unterhalb der "@page """ Zeile:

@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 einem Button und einem Nachrichtenbereich zur Anzeige des Status der Dateikonvertierung. Das Attribut accept der Komponente InputFile gibt die akzeptierten Dateiformate an.

Schreiben des Dateikonvertierungscodes

Nun schreiben wir den Code, der den Datei-Upload und die Konvertierung handhabt. Eine Kombination aus IronXL, Blazor und C# wird verwendet, um diese Aufgabe zu bewältigen. Sie können IronXL verwenden, um eine CSV- in eine Excel-Datei zu konvertieren.

Fügen Sie den folgenden Code in Ihre Index.razor - Datei unterhalb des Elements div ein, 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}";
        }
    }
}

Dieser Code definiert eine private Methode namens OnInputFileChange, die beim Hochladen einer Excel-Tabelle mit der Komponente InputFile ausgelöst wird; Excel kann im XLS- oder XLSX-Format vorliegen. Der Code liest die hochgeladene Excel-Datei, lädt sie in ein WorkBook- Objekt und speichert dieses anschließend als CSV-Datei. Der Status der Konvertierung wird im Meldungsbereich der Seite angezeigt.

Code-Zerlegung

Sehen Sie sich zunächst den gesamten 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}";
        }
    }
}

Brechen wir den Code weiter herunter:

1. Wenn eine Datei hochgeladen wird, wird die Methode OnInputFileChange ausgelöst und ihr wird ein InputFileChangeEventArgs Objekt übergeben. Dieses Objekt enthält Informationen über die hochgeladene Datei, wie 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. Innerhalb eines try-catch-Blocks wird ein neues MemoryStream-Objekt erstellt, um den Inhalt der hochgeladenen Datei zu lesen. Die Using-Anweisung stellt sicher, dass der Speicherstrom ordnungsgemäß freigegeben wird, sobald er nicht mehr benötigt wird.
4. Verwenden Sie das Schlüsselwort await, um den Inhalt der hochgeladenen Datei asynchron in den Speicherstream zu kopieren. Dies stellt sicher, dass diese Anwendung während des Lesens der Datei reaktionsfähig bleibt.
5. Anschließend wird die Methode WorkBook.Load verwendet, um den Inhalt des Speicherstreams in ein WorkBook Objekt zu laden. Dieses Objekt repräsentiert das gesamte Excel-Arbeitsbuch, einschließlich seiner 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. Anschließend wird die Methode SaveAsCsv des Objekts WorkBook verwendet, um die Arbeitsmappe als CSV-Datei unter dem angegebenen Ausgabedateinamen zu speichern.
8. Wenn die Konvertierung erfolgreich ist, wird eine Nachricht angezeigt, die darauf hinweist, dass die Konvertierung abgeschlossen ist. Wenn ein Fehler auftritt, fangen Sie die Ausnahme ab und zeigen Sie eine Fehlermeldung an.

Testen der Anwendung

Jetzt, da die Blazor-Anwendung vollständig ist, ist es Zeit, sie zu testen! Drücken Sie F5, um Ihre Anwendung in Visual Studio auszuführen. Sobald die Anwendung gestartet ist, sollten Sie einen Datei-Upload-Button auf der Seite sehen.

Führen Sie die Blazor-Anwendung aus

Klicken Sie auf den Button und wählen Sie eine Excel-Datei zum Hochladen aus. Die akzeptierten Dateiformate sind im Attribut "accept" der Komponente InputFile aufgelistet.

Eine Excel-Datei auswählen

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

Konvertierungsstatus

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

Die ausgegebene Excel-Datei