엑셀 파일 업로드 및 미리보기 기능 구현 가이드

• 5/23/2024
• 4 minutes to read

프로젝트: People 관리 게시판

개요: 본 가이드에서는 Blazor 서버 사이드 애플리케이션에 엑셀 파일 업로드 및 미리보기 기능을 구현하는 방법을 설명합니다. 이 기능을 통해 사용자는 엑셀 파일을 업로드하고, 파일 내의 데이터를 웹 페이지에서 미리 볼 수 있습니다. 데이터는 People 게시판에 표시되며, 사용자가 제공한 엑셀 파일 형식에 따라 이름, 이메일, 생년월일, 주요 전화번호 정보가 포함됩니다.

필수 구성 파일

1. 엑셀 템플릿 파일 위치: \wwwroot\excels\People\PeopleImport.xlsx
   • 내용 예시:

     FirstName MiddleName LastName  Email        DOB        PrimaryPhone
     John      -         Doe       john@doe.com  01/01/1980 123-456-7890
     Jane      -         Smith     jane@smith.com 02/02/1990 098-765-4321
     

구현 파일

• 파일 경로: \Pages\People\Import.razor

@page "/People/Import"

@using Microsoft.AspNetCore.Components.Forms
@using System.IO
@using DocumentFormat.OpenXml.Packaging
@using DocumentFormat.OpenXml.Spreadsheet
@using System.Collections.Generic
@using System.Linq
@using System.Threading.Tasks
@using Microsoft.EntityFrameworkCore
@using KodeeOne.Models
@using KodeeOne.Data

<PageTitle>Excel 데이터 가져오기</PageTitle>

<h3>Excel 파일 업로드</h3>

<a href="/excels/People/PeopleImport.xlsx" class="btn btn-secondary mb-3" target="_blank">Template Download</a>
<br />

<InputFile OnChange="HandleExcelUpload" accept=".xlsx" />

@if (employees != null && employees.Count > 0)
{
    <h4>데이터 미리보기</h4>
    <table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Date of Birth</th>
                <th>Primary Phone</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var employee in employees)
            {
                <tr>
                    <td>@employee.FirstName</td>
                    <td>@employee.MiddleName</td>
                    <td>@employee.LastName</td>
                    <td>@employee.Email</td>
                    <td>@employee.DOB</td>
                    <td>@employee.PrimaryPhone</td>
                </tr>
            }
        </tbody>
    </table>
}

<button class="btn btn-primary" @onclick="SaveEmployees">Save All</button>

@code {
    private List<Employee> employees = new List<Employee>();

    [Inject]
    public NavigationManager NavigationManager { get; set; }

    [Inject]
    public KodeeOne.Services.IUserService UserService { get; set; }

    private async Task HandleExcelUpload(InputFileChangeEventArgs e)
    {
        var file = e.File;
        if (file != null)
        {
            MemoryStream memoryStream = new MemoryStream();
            await file.OpenReadStream(maxAllowedSize: 10485760).CopyToAsync(memoryStream);
            memoryStream.Position = 0;

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

            List<Employee> loadedEmployees = new List<Employee>();

            foreach (Row row in sheetData.Descendants<Row>().Skip(1))
            {
                var cells = row.Descendants<Cell>().ToList();
                if (cells.Count >= 6)
                {
                    var firstName = ReadCellValue(workbookPart, cells[0]);
                    var middleName = ReadCellValue(workbookPart, cells[1]);
                    var lastName = ReadCellValue(workbookPart, cells[2]);
                    var email = ReadCellValue(workbookPart, cells[3]);
                    var dob = ReadCellValue(workbookPart, cells[4]);
                    var primaryPhone = ReadCellValue(workbookPart, cells[5]);

                    loadedEmployees.Add(new Employee
                    {
                        FirstName = firstName,
                        MiddleName = string.IsNullOrEmpty(middleName) ? "-" : middleName,
                        LastName = lastName,
                        Email = email,
                        DOB = dob,
                        PrimaryPhone = primaryPhone
                    });
                }
            }

            if (loadedEmployees.Any())
            {
                employees = loadedEmployees;
                StateHasChanged();
            }
        }
    }

    private string ReadCellValue(WorkbookPart workbookPart, Cell cell)
    {
        if (cell.DataType != null && cell.DataType.Value == CellValues.SharedString)
        {
            return workbookPart.SharedStringTablePart.SharedStringTable
                .ElementAt(int.Parse(cell.InnerText)).InnerText;
        }
        else
        {
            return cell.InnerText;
        }
    }

    private async Task SaveEmployees()
    {
        var tenant = UserService.GetUserNotCached().Tenant;
        var connectionString = tenant.ConnectionString;

        var optionsBuilder = new DbContextOptionsBuilder<TenantDbContext>();
        optionsBuilder.UseSqlServer(connectionString);

        using (var context = new TenantDbContext(optionsBuilder.Options))
        {
            foreach (var employee in employees)
            {
                await context.Employees.AddAsync(employee);
            }
            await context.SaveChangesAsync();
        }

        NavigationManager.NavigateTo("/Subjects", true);
    }
}

사용 방법

1. 템플릿 다운로드: 사용자는 제공된 링크를 통해 엑셀 템플릿을 다운로드할 수 있습니다.
2. 파일 업로드: 사용자는 .xlsx 파일을 선택하여 업로드합니다.
3. 데이터 미리보기: 업로드된 파일의 데이터가 테이블 형태로 화면에 표시됩니다. 각 행은 하나의 Employee 객체에 해당하며, 이름, 이메일, 생년월일, 주요 전화번호 정보를 포함합니다.
4. 데이터 저장: Save All 버튼을 클릭하면, 미리보기한 데이터가 데이터베이스의 Employees 테이블에 저장됩니다. 저장이 완료되면 /Subjects 페이지로 강제로 이동합니다.

이 가이드는 사용자가 Blazor 애플리케이션에서 엑셀 데이터를 쉽게 업로드하고 미리 볼 수 있도록 도와줍니다. 데이터는 서버에 저장되기 전에 미리 볼 수 있으며, 사용자는 데이터의 정확성을 확인할 수 있습니다.