Blazor에서 SpreadJS를 사용하여 Excel을 가져오고 내보내는 방법 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

Blazor에서 SpreadJS를 사용하여 Excel을 가져오고 내보내는 방법

페이지 정보

작성자 GrapeCity 작성일 21-06-04 16:36 조회 195회 댓글 0건

본문

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


SpreadJS Blazor 컴포넌트 만들기

SpreadJS를 Blazor 응용 프로그램에 포함하려면 먼저 SpreadJS를 포함할 Blazor 컴포넌트를 만들어야 합니다. 이 포스팅에서는 Visual Studio 2019와 SpreadJS v14를 사용하겠습니다. 컴포넌트를 만들기 위해 우선 Razor 클래스 라이브러리를 만듭니다.

RazorClassLibrary

라이브러리 이름을 "SpreadJS_Blazor_Lib"로 지정하였습니다.

ConfigureNewProject

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

RootFolder

프로젝트를 만들면 "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"로 바꿀 수 있습니다. 이 파일은 래퍼(Wrapper)로 사용할 컴포넌트입니다.

@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" 템플릿을 사용하여 새 프로젝트를 추가할 수 있습니다.

AddNewProject

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

AddProjectReference

새 프로젝트에는 다른 razor 파일 몇 개가 포함된 Pages 폴더가 있어야 합니다. 여기서는 HTML에 대한 코드 숨김을 설정하도록 Index.razor 파일을 편집하려고 합니다.

@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 파일에 대한 참조를 추가할 수 있습니다.

<!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="_content/SpreadJS_Blazor_Lib/sjs/css/gc.spread.sheets.excel2013white.14.0.8.css" rel="stylesheet" />
  <script src="_content/SpreadJS_Blazor_Lib/sjs/scripts/gc.spread.sheets.all.14.0.8.min.js" type="text/javascript"></script>
  <script src="_content/SpreadJS_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>


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

SpreadJS

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);
  }
}


이 포스팅에서는 자체 Blazor 응용 프로그램에서 SpreadJS를 구현하고 .NET의 이점을 활용하는 방법을 보여드렸습니다. 여기서 배운 방법을 시도해보고 SpreadJS의 다른 놀라운 기능에 대해 알아보려면 지금 SpreadJS 평가판을 다운로드하여 직접 사용해 보세요!




baa420b8e8ddf9cb9df1e575a60b6f54_1622792015_8832.png
 

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.