Jak eksportować do CSV w Blazor

Konfiguracja projektu Blazor

Aby rozpocząć, należy utworzyć nowy projekt Blazor Server. Otwórz program Visual Studio, utwórz nowy projekt i wybierz szablon "Blazor Server App". Nadaj nazwę projektowi i kliknij "Utwórz".

Po utworzeniu projektu otwórz folder Pages i znajdź plik Index.razor. To właśnie tam dodaje się i koduje komponenty Blazor w celu obsługi przesyłania i konwersji plików.

Instalacja IronXL

Przed rozpoczęciem pisania kodu konieczne jest zainstalowanie biblioteki IronXL. Otwórz konsolę menedżera pakietów w Visual Studio i uruchom następujące polecenie:

Install-Package IronXl.Excel

To polecenie zainstaluje bibliotekę IronXL w Twoim projekcie Blazor. Teraz jesteś gotowy, aby zacząć pisać kod!

Tworzenie komponentu do przesyłania plików

Najpierw należy utworzyć podstawowy komponent do przesyłania plików, który umożliwi użytkownikom przesyłanie istniejących plików Excel. Następnie dodaje się komponent InputFile z przestrzeni nazw Microsoft.AspNetCore.Components.Forms. Dodaj poniższy kod do pliku Index.razor, poniżej linii "@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>

Ten kod konfiguruje komponent przesyłania plików, wraz z przyciskiem i obszarem komunikatów służącym do wyświetlania statusu konwersji pliku. Atrybut accept w komponencie InputFile określa akceptowane formaty plików.

Pisanie kodu do konwersji plików

Teraz napiszmy kod obsługujący przesyłanie i konwersję plików. Do realizacji tego zadania zostanie wykorzystane połączenie IronXL, Blazor i C#. Możesz użyć IronXL do konwersji pliku CSV na plik Excel.

Dodaj poniższy kod do pliku Index.razor, poniżej elementu div, który dodałeś wcześniej.

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

Ten kod definiuje metodę prywatną o nazwie OnInputFileChange, która zostanie wywołana po przesłaniu arkusza kalkulacyjnego Excel za pomocą komponentu InputFile; Pliki Excel mogą być w formacie XLS lub XLSX. Kod odczytuje przesłany plik Excel, ładuje go do obiektu WorkBook, a następnie zapisuje WorkBook jako plik CSV. Status konwersji jest wyświetlany w obszarze komunikatów na stronie.

Analiza kodu

Najpierw zapoznaj się z pełnym kodem:

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

Przeanalizujmy kod bardziej szczegółowo:

1. Po przesłaniu pliku uruchamiana jest metoda OnInputFileChange, do której przekazywany jest obiekt InputFileChangeEventArgs. Ten obiekt zawiera informacje o przesłanym pliku, takie jak jego nazwa i rozmiar.
2. Zapisz oryginalną nazwę pliku w zmiennej o nazwie originalFileName, aby wyświetlić ją na stronie.
3. W bloku try-catch utwórz nowy obiekt MemoryStream, aby odczytać zawartość przesłanego pliku. Instrukcja using gwarantuje, że strumień pamięci zostanie prawidłowo usunięty, gdy nie będzie już potrzebny.
4. Użyj słowa kluczowego await, aby asynchronicznie skopiować zawartość przesłanego pliku do strumienia pamięci. Dzięki temu aplikacja pozostaje responsywna podczas odczytywania pliku.
5. Następnie metoda WorkBook.Load służy do załadowania zawartości strumienia pamięci do obiektu WorkBook. Ten obiekt reprezentuje cały skoroszyt programu Excel, w tym jego arkusze, komórki i dane.
6. Następnie określ nazwę pliku wyjściowego dla przekonwertowanego pliku CSV. W tym przypadku używamy nazwy "sample.csv".
7. Następnie używana jest metoda SaveAsCsv obiektu WorkBook w celu zapisania skoroszytu jako pliku CSV o podanej nazwie pliku wyjściowego.
8. Jeśli konwersja przebiegnie pomyślnie, wyświetli się komunikat informujący o jej zakończeniu. W przypadku wystąpienia błędu należy przechwycić wyjątek i wyświetlić komunikat o błędzie.

Testowanie aplikacji

Teraz, gdy aplikacja Blazor jest gotowa, czas ją przetestować! Naciśnij klawisz F5, aby uruchomić aplikację w Visual Studio. Po uruchomieniu aplikacji na stronie powinien pojawić się przycisk przesyłania plików.

Uruchom aplikację Blazor

Kliknij przycisk i wybierz plik Excel do przesłania. Akceptowane formaty plików są wymienione w atrybucie accept komponentu InputFile.

Wybierz plik Excel

Po wybraniu pliku aplikacja odczyta go, przekonwertuje do formatu CSV za pomocą IronXL i zapisze przekonwertowany plik pod określoną nazwą pliku wyjściowego. Powinieneś zobaczyć komunikat wskazujący status konwersji, a także nazwę oryginalnego pliku.

Status konwersji

Gratulacje! Udało Ci się stworzyć aplikację Blazor, która może eksportować pliki Excel do formatu CSV przy użyciu IronXL. Poniższy zrzut ekranu przedstawia wynik działania powyższego programu.

Plik Excel z wynikami