Cómo exportar a CSV en Blazor

Configuración de su proyecto Blazor

Para comenzar, necesitarás crear un nuevo proyecto de servidor Blazor. Abre Visual Studio, crea un nuevo proyecto y selecciona la plantilla "Blazor Server App". Nombra tu proyecto y haz clic en "Crear".

Una vez creado tu proyecto, abre la carpeta de Pages y localiza el archivo Index.razor. Aquí es donde se agregan y codifican los componentes Blazor para manejar las cargas y conversiones de archivos.

Instalación de IronXL

Antes de comenzar a escribir código, es necesario instalar la biblioteca IronXL. Abre la Consola del Administrador de Paquetes en Visual Studio y ejecuta el siguiente comando:

Install-Package IronXL.Excel

Este comando instalará la biblioteca IronXL en tu proyecto Blazor. ¡Ahora estás listo para comenzar a escribir código!

Creación del componente de carga de archivos

Primero, crea un componente básico de carga de archivos que permita a los usuarios subir un archivo de Excel existente. Luego, se agrega el componente InputFile del espacio de nombres Microsoft.AspNetCore.Components.Forms. Agrega el siguiente código a tu archivo Index.razor, debajo de la línea "@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>

Este código configura el componente de carga de archivos, completo con un botón y un área de mensaje para mostrar el estado de la conversión del archivo. El atributo accept en el componente InputFile especifica los formatos de archivo aceptados.

Escritura del código de conversión de archivos

Ahora, escribamos el código que maneja la carga y conversión de archivos. Se utilizará una combinación de IronXL, Blazor y C# para llevar a cabo esta tarea. Puedes usar IronXL para convertir un CSV a un archivo Excel.

Agrega el siguiente código a tu archivo Index.razor, debajo del elemento div que agregaste anteriormente.

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

Este código define un método privado llamado OnInputFileChange, que se activará cuando se cargue una hoja de cálculo de Excel utilizando el componente InputFile; Excel puede estar en formato XLS o XLSX. El código lee el archivo básico de Excel subido, lo carga en un objeto WorkBook y luego guarda el WorkBook como un archivo CSV. El estado de la conversión se muestra en el área de mensajes en la página.

Desglose del código

Primero, mira el código completo:

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

Desglosaremos el código más a fondo:

1. Cuando se carga un archivo, se activa el método OnInputFileChange y se le pasa un objeto InputFileChangeEventArgs. Este objeto contiene información sobre el archivo subido, como su nombre y tamaño.
2. Almacena el nombre original del archivo en una variable llamada originalFileName para mostrarlo en la página.
3. Dentro de un bloque try-catch, crea un nuevo objeto MemoryStream para leer el contenido del archivo subido. La declaración using asegura que el flujo de memoria se elimine correctamente una vez que ya no sea necesario.
4. Usa la palabra clave await para copiar de manera asincrónica el contenido del archivo subido en el flujo de memoria. Esto asegura que esta aplicación se mantenga receptiva mientras lee el archivo.
5. A continuación, el método WorkBook.Load se usa para cargar el contenido del flujo de memoria en un objeto WorkBook. Este objeto representa todo el libro de Excel, incluidas sus hojas, celdas y datos.
6. Luego, especifica un nombre de archivo de salida para el archivo CSV convertido. En este caso, estamos usando el nombre "sample.csv".
7. El método SaveAsCsv del objeto WorkBook se utiliza para guardar el libro como un archivo CSV con el nombre de archivo de salida especificado.
8. Si la conversión es exitosa, se muestra un mensaje para indicar que se ha completado la conversión. Si ocurre un error, captura la excepción y muestra un mensaje de error.

Probando la aplicación

Ahora que la aplicación Blazor está completa, ¡es hora de probarla! Presiona F5 para ejecutar tu aplicación en Visual Studio. Una vez que la aplicación se esté ejecutando, deberías ver un botón de carga de archivos en la página.

Ejecutar la aplicación Blazor

Haz clic en el botón y selecciona un archivo de Excel para cargar. Los formatos de archivo aceptados están listados en el atributo accept del componente InputFile.

Seleccionar un archivo de Excel

Después de haber seleccionado un archivo, la aplicación leerá el archivo, lo convertirá a un formato CSV usando IronXL y guardará el archivo convertido con el nombre de archivo de salida especificado. Deberías ver un mensaje indicando el estado de la conversión, así como el nombre original del archivo.

Estado de la conversión

¡Felicitaciones! Has construido con éxito una aplicación Blazor que puede exportar archivos Excel al formato CSV usando IronXL. La siguiente captura de pantalla muestra la salida del programa anterior.

El archivo Excel de salida