Blazor 에서 CSV 파일로 내보내는 방법

Blazor 프로젝트 설정

시작하려면 새 Blazor Server 프로젝트를 만들어야 합니다. Visual Studio를 열고 새 프로젝트를 생성한 후 "Blazor Server App" 템플릿을 선택하세요. 프로젝트의 이름을 정하고 '생성'을 클릭하세요.

프로젝트가 생성되면 Pages 폴더를 열고 Index.razor 파일을 찾으세요. 여기서 Blazor 구성 요소가 추가되고 파일 업로드 및 변환을 처리하도록 코딩됩니다.

IronXL 설치

코드를 작성하기 전에 IronXL 라이브러리를 설치해야 합니다. Visual Studio의 패키지 관리자 콘솔을 열고 다음 명령을 실행하세요:

Install-Package IronXl.Excel

이 명령은 Blazor 프로젝트에 IronXL 라이브러리를 설치합니다. 이제 코드를 작성할 준비가 되셨습니다!

파일 업로드 구성 요소 생성

먼저, 사용자가 기존 Excel 파일을 업로드할 수 있는 기본 파일 업로드 구성 요소를 만듭니다. 그런 다음, InputFile 구성 요소가 Microsoft.AspNetCore.Components.Forms 네임스페이스에서 추가됩니다. Pages/Index.razor 파일에 다음 코드를 '@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>

이 코드는 파일 업로드 구성 요소를 설정하며 버튼과 파일 변환 상태를 표시할 수 있는 메시지 영역을 포함합니다. accept 속성은 허용되는 파일 형식을 InputFile 구성 요소에 지정합니다.

파일 전환 코드 작성

이제 파일 업로드 및 변환을 처리하는 코드를 작성해 봅시다. IronXL, Blazor, 및 C#을 조합하여 이 작업을 완료할 것입니다. IronXL을 사용하여 CSV를 Excel 파일로 변환할 수 있습니다.

다음 코드를 Index.razor 파일에 추가하십시오. 이전에 추가한 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}";
        }
    }
}

이 코드는 OnInputFileChange라는 비공개 메서드를 정의하며, InputFile 구성 요소를 사용하여 Excel 스프레드시트를 업로드할 때 트리거됩니다. Excel은 XLS 또는 XLSX 형식일 수 있습니다. 코드는 업로드된 기본 Excel 파일을 읽고 이를 WorkBook 객체에 로드한 뒤, WorkBook를 CSV 파일로 저장합니다. 변환 상태는 페이지의 메시지 영역에 표시됩니다.

코드 분해

먼저 전체 코드를 봅시다:

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

이 코드를 더 세분하여 보겠습니다:

1. 파일이 업로드되면 OnInputFileChange 메서드가 트리거되고 InputFileChangeEventArgs 객체가 전달됩니다. 이 객체는 업로드된 파일의 이름, 크기같은 정보를 포함합니다.
2. 페이지에 표시할 원본 파일 이름을 originalFileName라는 변수에 저장합니다.
3. try-catch 블록 내에서 업로드된 파일의 내용을 읽기 위해 새로운 MemoryStream 객체를 만듭니다. using 문은 메모리 스트림이 더 이상 필요하지 않을 때 적절히 폐기되도록 보장합니다.
4. await 키워드를 사용하여 업로드된 파일의 내용을 메모리 스트림에 비동기적으로 복사합니다. 이것은 파일을 읽는 동안 애플리케이션이 반응성을 유지하도록 보장합니다.
5. 다음으로, 메모리 스트림의 내용을 WorkBook 객체에 로드하기 위해 WorkBook.Load 메서드를 사용합니다. 이 객체는 엑셀 워크북 전체를 나타내며, 시트, 셀 및 데이터를 포함합니다.
6. 변환된 CSV 파일의 출력 파일 이름을 지정하십시오. 이 경우, 우리는 'sample.csv'라는 이름을 사용하고 있습니다.
7. WorkBook 객체의 SaveAsCsv 메서드를 사용하여 지정된 출력 파일 이름으로 워크북을 CSV 파일로 저장합니다.
8. 변환이 성공하면, 변환이 완료되었음을 알리는 메시지가 표시됩니다. 오류가 발생하면 예외를 잡아 오류 메시지를 표시하십시오.

응용 프로그램 테스트

이제 Blazor 애플리케이션이 완료되었으므로, 테스트할 차례입니다! Visual Studio에서 F5를 눌러 애플리케이션을 실행하십시오. 애플리케이션이 실행되면 페이지에 파일 업로드 버튼이 표시되어야 합니다.

Blazor 애플리케이션 실행

버튼을 클릭하고 업로드할 엑셀 파일을 선택하십시오. 허용되는 파일 형식은 InputFile 구성 요소의 accept 속성에 나열되어 있습니다.

엑셀 파일 선택

파일을 선택한 후, 애플리케이션이 파일을 읽고 IronXL을 사용하여 CSV 형식으로 변환하고 지정된 출력 파일 이름으로 변환된 파일을 저장합니다. 변환 상태와 원래 파일 이름을 나타내는 메시지가 표시되어야 합니다.

변환 상태

축하해요! IronXL을 사용하여 엑셀 파일을 CSV 형식으로 내보낼 수 있는 Blazor 애플리케이션을 성공적으로 만들었습니다. 다음 스크린샷은 위의 프로그램 출력을 보여줍니다.

출력 Excel 파일