Blazor에서 Excel 스프레드시트 파일을 가져오거나 내보내는 방법

고급기능 Blazor에서 Excel 스프레드시트 파일을 가져오거나 내보내는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-18 15:04 조회 960회 댓글 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"로 바꿀 수 있습니다. 이 파일은 래퍼로 사용할 컴포넌트입니다.

@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/SJS_Blazor_Lib/sjs/css/gc.spread.sheets.excel2013white.14.1.0.css" rel="stylesheet" />
  <script src="_content/SJS_Blazor_Lib/sjs/scripts/gc.spread.sheets.all.14.1.0.min.js" type="text/javascript"></script>
  <script src="_content/SJS_Blazor_Lib/sjs/scripts/interop/gc.spread.excelio.14.1.0.min.js" type="text/javascript"></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>
@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를 실행하는 데 필요한 작업이 모두 완료되었습니다.

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를 다운로드하십시오!

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!