Blazor를 사용하여 Excel XLSX를 가져오고 내보내는 방법

고급기능 Blazor를 사용하여 Excel XLSX를 가져오고 내보내는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-06-26 16:28 조회 228회 댓글 0건

본문

첨부파일

spreadjs_blazor_lib.zip (3.9M)

관련링크

Blazor는 .NET의 강력한 기능을 갖춘 클라이언트 측 상호작용형 웹 UI를 빌드하기 위한 비교적 새로운 프레임워크입니다. 일반적인 사용 사례에는 Blazor 응용 프로그램으로 기존 Excel 파일 가져오기, 사용자에게 스프레드시트 제공하기, 변경 허용하기, 변경 데이터를 다시 Excel 파일로 내보내거나 데이터베이스에 저장하기 등이 있습니다. SpreadJS는 이러한 프로세스를 간단하게 만들어 주는 매우 강력하고 확장성 높은 JavaScript 스프레드시트 컴포넌트입니다.

Blazor에서 스프레드시트 파일을 가져오거나 내보내는 절차입니다.

이 자습서를 따라 하기 위한 샘플은 여기에서 다운로드할 수 있습니다.

SpreadJS Blazor 컴포넌트 만들기

SpreadJS를 Blazor 응용 프로그램에 포함하려면 먼저 SpreadJS를 포함할 Blazor 컴포넌트를 만들어야 합니다. 이 자습서에서는 Visual Studio 2022와 SpreadJS v16을 사용합니다. 컴포넌트를 만들려면 먼저 Razor 클래스 라이브러리를 생성해야 합니다.

Razor 클래스 라이브러리

편의상 라이브러리 이름은 'SpreadJS_Blazor_Lib'처럼 지정해도 됩니다.

프로젝트 구성

프로젝트가 생성되면 SpreadJS 파일을 'wwwroot' 폴더에 복사해야 합니다.

솔루션 탐색기

프로젝트를 만들었다면 'exampleJSInterop.js'라는 파일도 생성되었을 것입니다. 이 파일을 편집해서 SpreadJS의 JavaScript 코드에 C# 코드를 연결할 로직을 추가해야 합니다.

// This file is to show how a library package may provide JavaScript interop features
// wrapped in a .NET API

window.sjsAdaptor = {
   init: function (host, config) {
       if (config.hostStyle) {
           var hostStyle = config.hostStyle;
           var styles = hostStyle.split(';');
           styles.forEach((styleStr) => {
               var style = styleStr.split(':');
               host.style[style[0]] = style[1];
          });
           delete config.hostStyle;
      }

       return new GC.Spread.Sheets.Workbook(host, config);
  },

   setValue: function (host, sheetIndex, row, col, value) {
       var spread = GC.Spread.Sheets.findControl(host);
       if (spread) {
           var sheet = spread.getSheet(sheetIndex);
           sheet.setValue(row, col, value);
      }
  },

   openExcel: function (host, inputFile) {
       var spread = GC.Spread.Sheets.findControl(host);
       if (spread) {
           var excelIO = new GC.Spread.Excel.IO();
           excelIO.open(inputFile.files[0], function (json) {
               spread.fromJSON(json);
          })
      }
  }
};

응용 프로그램은 기본 'Component1.razor' 파일도 생성했을 것입니다. 이 파일의 이름을 'SpreadJS.razor'로 바꿔도 됩니다.

이 파일은 래퍼로 사용할 컴포넌트입니다.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div @ref="host"></div>

@code {
  [Parameter]
   public int SheetCount { get; set; }

  [Parameter]
   public string HostStyle { get; set; }

   private ElementReference host;

   public void setValue(int sheetIndex, int row, int col, object value)
  {
       JSRuntime.InvokeVoidAsync("sjsAdaptor.setValue", host, sheetIndex, row, col, value);
  }

   public void OpenExcel(ElementReference inputFile)
  {
       JSRuntime.InvokeVoidAsync("sjsAdaptor.openExcel", host, inputFile);
  }

   protected override void OnAfterRender(bool firstRender)
  {
       if (firstRender)
      {
           JSRuntime.InvokeVoidAsync("sjsAdaptor.init", host, new Dictionary<string, object>() {
              { "sheetCount", SheetCount},
              { "hostStyle", HostStyle }
          });
      }
  }
}

SpreadJS를 사용하여 Blazor 응용 프로그램 만들기

SpreadJS를 사용하여 컴포넌트를 만들었으니, 이제 해당 컴포넌트를 Blazor 응용 프로그램에서 사용할 수 있습니다. 우선 'Blazor WebAssemblyApp' 템플릿을 사용하여 새 프로젝트를 추가해 봅시다.

Blazor WebAssembly 응용 프로그램

SpreadJS 컴포넌트를 추가하려면 솔루션 탐색기에서 새 프로젝트의 종속성을 마우스 오른쪽 버튼으로 클릭하고 '프로젝트 참조 추가'를 클릭합니다. SpreadJS_Blazor_Lib이 옵션 중 하나로 표시되어야 합니다.

프로젝트 참조 추가

이 새 프로젝트에는 서로 다른 razor 파일 몇 개가 포함된 Pages 폴더가 있을 것입니다. 여기서 Index.razor 파일을 편집하여 HTML 코드 숨김을 설정할 것입니다.

@page "/"

@using SpreadJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>

<SpreadJS SheetCount="3" HostStyle="@HostStyle" />

@code {
   private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";
}

이제 'wwwroot' 폴더의 index.html 파일을 편집할 수 있습니다.

이 파일에 SpreadJS JavaScript 및 CSS 파일에 대한 참조를 추가할 수 있습니다.

(Index.html)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>BlazorApp1</title>
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
   
  <link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.0.5.css" rel="stylesheet" />

  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.16.0.5.min.js"></script>

  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.16.0.5.min.js"></script>
  <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.16.0.5.min.js"></script>

  <script src="_content/SJS_Blazor_Lib/exampleJsInterop.js" type="text/javascript"></script>
</head>

<body>
  <app>Loading...</app>

  <div id="blazor-error-ui">
      An unhandled error has occurred.
      <a href="" class="reload">Reload</a>
      <a class="dismiss">??</a>
  </div>
  <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

'페이지' 폴더의 Index.razor에서 코드를 편집할 수도 있습니다.

(Index.razor)

@page "/"

@using SJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>

<table>
   <tr>
       <td>
           <label>Sheet Index</label>
           <input @bind-value="@SheetIndex" />
       </td>
       <td>
           <label>Row Index</label>
           <input @bind-value="@Row" />
       </td>
       <td>
           <label>Column Index</label>
           <input @bind-value="@Column" />
       </td>
       <td>
           <lable>Value</lable>
           <input @bind-value="@Value" />
       </td>
   </tr>
   <tr>
       <td>
           <button @onclick="doSomething">Update Text</button>
       </td>
   </tr>
   <tr>
       <td>
           <input type="file" @ref="inputFileEle" />
       </td>
       <td>
           <button @onclick="ImportExcel">Import File</button>
       </td>
   </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />


@code {
   private SpreadJS ss;

   private ElementReference inputFileEle;

   public int SheetIndex { get; set; } = 0;

   public int Row { get; set; } = 0;

   public int Column { get; set; } = 0;

   public string Value { get; set; } = "";

   private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";

   private void doSomething()
  {
       ss.setValue(SheetIndex, Row, Column, Value);
  }

   private void ImportExcel()
  {
       ss.OpenExcel(inputFileEle);
  }
}

이제 Blazor 응용 프로그램에서 SpreadJS를 실행하기 위해 필요한 작업이 모두 완료되었습니다.

Blazor 응용 프로그램의 SpreadJS

Blazor Excel 가져오기

앞에서 살펴본 코드는 Blazor 응용 프로그램에서 SpreadJS를 사용하는 기본적인 사례일 뿐입니다. Excel 가져오기 기능을 포함하여 더 발전시킬 수 있습니다.

SpreadJS를 통해 Blazor 응용 프로그램에서 임의의 Excel 파일을 가져올 수도 있습니다. 기본 SpreadJS Blazor 코드와 유사하게 구현할 수 있지만, Index.razor 파일을 편집하여 값을 설정하고 Excel 파일을 열기 위한 코드를 추가해야 합니다.

@page "/"

@using SpreadJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>

<table>
   <tr>
       <td>
           <label>Sheet Index</label>
           <input @bind-value="@SheetIndex" />
       </td>
       <td>
           <label>Row Index</label>
           <input @bind-value="@Row" />
       </td>
       <td>
           <label>Column Index</label>
           <input @bind-value="@Column" />
       </td>
       <td>
           <lable>Value</lable>
           <input @bind-value="@Value" />
       </td>
   </tr>
   <tr>
       <td>
           <button @onclick="doSomething">Update Text</button>
       </td>
   </tr>
   <tr>
       <td>
           <input type="file" @ref="inputFileEle" @onchange="ImportExcel" />
       </td>
   </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />


@code {
   private SpreadJS ss;

   private ElementReference inputFileEle;

   public int SheetIndex { get; set; } = 0;

   public int Row { get; set; } = 0;

   public int Column { get; set; } = 0;

   public string Value { get; set; } = "";

   private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";

   private void doSomething()
  {
       ss.setValue(SheetIndex, Row, Column, Value);
  }

   private void ImportExcel()
  {
       ss.OpenExcel(inputFileEle);
  }
}

Index.razor에 이 코드를 추가했다면 가져오기 기능이 작동할 것입니다. SpreadJS_Blazor_Lib 프로젝트의 SpreadJS.razor와 exampleJsInterop.js 파일을 손본 이전 단계에서 코드를 이미 추가했기 때문입니다.

Blazor Excel 내보내기

또한 Excel 파일을 내보내기 위한 기능도 추가할 수 있습니다.

그렇게 하려면 exampleJsInterop.js 파일에 코드를 추가해야 합니다.

window.sjsAdaptor = {
  (....)
   saveExcel: function (host) {
       var spread = GC.Spread.Sheets.findControl(host);
       if (spread) {
           var json = spread.toJSON();
           var excelIO = new GC.Spread.Excel.IO();
           excelIO.save(json, function (blob) {
               saveAs(blob, "export.xlsx");
          }, function (e) {
               console.log(e);
          });
      }
  }
};

'saveAs' 기능이 작동하게 하려면 index.html 파일에 FileSaver 라이브러리 참조도 추가해야 합니다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>

이 코드가 페이지에서 작동하도록 하려면 Index.razor 코드에 내보내기 위한 버튼을 추가해야 합니다.

@page "/"

@using SpreadJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>

<table>

  (....)
   
       <td>
           <button @onclick="ExportExcel">Export File</button>
       </td>
   </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />


@code {

  (....)

   private void ExportExcel()
  {
       ss.SaveExcel();
  }
}

'ss.SaveExcel()' 호출은 SpreadJS.razor 파일에 있는 코드를 사용하므로, exampleJsInterop.js 파일에 있는 알맞은 함수를 가리키는 코드를 반드시 삽입해야 합니다.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime


<div @ref="host"></div>

@code {
   
  (....)

   public void SaveExcel()
  {
       JSRuntime.InvokeVoidAsync("sjsAdaptor.saveExcel", host);
  }

  (....)
}

SpreadJS