Cómo exportar a CSV en Blazor

Setting Up Your Blazor Project

To get started, you'll need to create a new Blazor Server project. Open Visual Studio, create a new project and select the "Blazor Server App" template. Name your project, and click "Create."

Once your project is created, open the Pages folder and locate the Index.razor file. This is where the Blazor components are added and coded to handle file uploads and conversions.

Installing IronXL

Before starting to write code, it is necessary to install the IronXL library. Open the Package Manager Console in Visual Studio and run the following command:

Install-Package IronXL.Excel

This command will install the IronXL library in your Blazor project. Now you're ready to start writing code!

Creating the File Upload Component

First, create a basic file upload component that allows users to upload an existing Excel file. Then, the InputFile component is added from the Microsoft.AspNetCore.Components.Forms namespace. Add the following code to your Index.razor file, below the "@page """ line:

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

This code sets up the file upload component, complete with a button and a message area to display the status of the file conversion. The accept attribute on the InputFile component specifies the accepted file formats.

Writing the File Conversion Code

Now, let's write the code that handles the file upload and conversion. A combination of IronXL, Blazor, and C# will be used to accomplish this task. You can use IronXL to convert a CSV to an Excel file.

Add the following code to your Index.razor file, below the div element you added earlier.

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

This code defines a private method called OnInputFileChange, which will be triggered when an Excel spreadsheet is uploaded using the InputFile component; Excel can be in XLS or XLSX format. The code reads the uploaded basic Excel file, loads it into a WorkBook object, and then saves the WorkBook as a CSV file. The status of the conversion is displayed in the message area on the page.

Code Breakdown

First, look at the complete code:

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

Let's break down the code further:

1. When a file is uploaded, the OnInputFileChange method is triggered, and an InputFileChangeEventArgs object is passed to it. This object contains information about the uploaded file, such as its name and size.
2. Store the original file name in a variable called originalFileName to display it on the page.
3. Inside a try-catch block, create a new MemoryStream object to read the uploaded file's contents. The using statement ensures that the memory stream is properly disposed of once it's no longer needed.
4. Use the await keyword to asynchronously copy the contents of the uploaded file into the memory stream. This ensures that this application remains responsive while reading the file.
5. Next, the WorkBook.Load method is used to load the contents of the memory stream into a WorkBook object. This object represents the entire Excel workbook, including its sheets, cells, and data.
6. Then specify an output file name for the converted CSV file. In this case, we're using the name "sample.csv."
7. The SaveAsCsv method of the WorkBook object is then used to save the workbook as a CSV file with the specified output file name.
8. If the conversion is successful, a message is displayed to indicate that the conversion has been completed. If an error occurs, catch the exception and display an error message.

Testing the Application

Now that the Blazor application is complete, it's time to test it! Press F5 to run your application in Visual Studio. Once the application is running, you should see a file upload button on the page.

Run the Blazor application

Click the button, and select an Excel file to upload. The accepted file formats are listed in the accept attribute of the InputFile component.

Select an Excel file

After you've selected a file, the application will read the file, convert it to a CSV format using IronXL, and save the converted file with the specified output file name. You should see a message indicating the status of the conversion, as well as the original file name.

Conversion status

Congratulations! You've successfully built a Blazor application that can export Excel files to CSV format using IronXL. The following screenshot shows the output of the above program.

The output Excel file