Blazor 엑셀 업로드

• 11/21/2023
• 3 minutes to read

엑셀 파일 업로드 및 미리보기 후 실제 Employees 테이블 업데이트

이 강좌는 Blazor Server 애플리케이션에서 엑셀 파일을 업로드하고, 해당 데이터를 미리보기하며, 마지막으로 데이터베이스에 업데이트하는 전체 프로세스를 다룰 것입니다. 사용된 네임스페이스는 VisualAcademy이며, 간단한 Employee 클래스도 포함됩니다.

1. Employee 모델 클래스 생성

먼저, 엑셀 파일로부터 데이터를 읽기 위해 사용할 Employee 클래스를 생성합니다.

namespace VisualAcademy.Models
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string Address { get; set; }
    }
}

2. EmployeeUpload.razor (파일 업로드 및 미리보기 페이지)

@page "/EmployeeUpload"
@using VisualAcademy.Models
@inject EmployeeUploadService UploadService
@using Microsoft.AspNetCore.Components.Forms

<h3>Employee Upload</h3>

<a href="/excels/Applicants-FileTransfer.xlsx" class="btn btn-secondary">Template Download</a>

<EditForm EditContext="@editContext" OnValidSubmit="@FormSubmit">
    <div class="form-group">
        <label for="txtFile">File</label>
        <InputFile OnChange="@HandleSelection"></InputFile>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</EditForm>

@if (employeesPreview != null)
{
    <EmployeeUploadPreview Employees="@employeesPreview" />
}

@code {
    private List<Employee> employeesPreview;
    private EditContext editContext = new EditContext(new object());

    private async Task HandleSelection(InputFileChangeEventArgs e)
    {
        var file = e.File;
        if (file != null)
        {
            using var stream = file.OpenReadStream();
            employeesPreview = await UploadService.ParseExcelAsync(stream);
        }
    }

    private void FormSubmit()
    {
        // 추가 로직 구현 (옵션)
    }
}

3. EmployeeUploadPreview.razor (미리보기 및 데이터베이스 업데이트 컴포넌트)

@using VisualAcademy.Models

@code {
    [Parameter]
    public List<Employee> Employees { get; set; }

    private void UpdateEmployees()
    {
        // 데이터베이스 업데이트 로직 구현
    }
}

@if (Employees != null && Employees.Count > 0)
{
    <table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var employee in Employees)
            {
                <tr>
                    <td>@employee.FirstName</td>
                    <td>@employee.LastName</td>
                    <td>@employee.Gender</td>
                    <td>@employee.Address</td>
                </tr>
            }
        </tbody>
    </table>
    <button class="btn btn-success" @onclick="UpdateEmployees">Update Employees</button>
}

4. EmployeeUploadService.cs (서비스 클래스)

using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Spreadsheet;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using VisualAcademy.Models;

public class EmployeeUploadService
{
    public async Task<List<Employee>> ParseExcelAsync(Stream fileStream)
    {
        var employees = a List<Employee>();

        using var memoryStream = new MemoryStream();
        await fileStream.CopyToAsync(memoryStream);
        memoryStream.Position = 0;

        using var spreadsheetDocument = SpreadsheetDocument.Open(memoryStream, false);
        WorkbookPart workbookPart = spreadsheetDocument.WorkbookPart;
        Sheet sheet = workbookPart.Workbook.Descendants<Sheet>().FirstOrDefault();
        WorksheetPart worksheetPart = (WorksheetPart)workbookPart.GetPartById(sheet.Id);
        SheetData sheetData = worksheetPart.Worksheet.Elements<SheetData>().First();

        foreach (Row r in sheetData.Elements<Row>().Skip(7))
        {
            var cellEnumerator = r.Elements<Cell>().GetEnumerator();
            cellEnumerator.MoveNext();
            var fullName = ReadCellValue(workbookPart, cellEnumerator.Current)?.Split(' ');
            var firstName = fullName?.Length > 0 ? fullName[0] : "";
            var lastName = fullName?.Length > 1 ? fullName[1] : "";

            cellEnumerator.MoveNext();
            var gender = ReadCellValue(workbookPart, cellEnumerator.Current);

            cellEnumerator.MoveNext();
            var address = ReadCellValue(workbookPart, cellEnumerator.Current);

            employees.Add(new Employee
            {
                FirstName = firstName,
                LastName = lastName,
                Gender = gender,
                Address = address,
            });
        }

        return employees;
    }

    private string ReadCellValue(WorkbookPart workbookPart, Cell cell)
    {
        if (cell.DataType != null and cell.DataType.Value == CellValues.SharedString)
        {
            return workbookPart.SharedStringTablePart.SharedStringTable.Elements<SharedStringItem>().ElementAt(int.Parse(cell.CellValue.InnerText)).InnerText;
        }
        else
        {
            return cell.CellValue?.InnerText;
        }
    }
}

5. 추가 설명 및 주의사항

• EmployeeUpload.razor 페이지는 파일 업로드와 미리보기를 담당합니다.
• EmployeeUploadPreview.razor는 미리보기된 데이터를 보여주고, 최종적으로 데이터베이스에 업데이트하는 기능을 가집니다.
• EmployeeUploadService는 엑셀 파일을 처리하고 Employee 객체 리스트로 변환하는 로직을 담당합니다.
• 실제 애플리케이션에서는 데이터베이스 업데이트 로직, 파일 유효성 검사, 예외 처리 등을 추가로 고려해야 합니다.