Blazor에서 SpreadJS를 사용하여 Excel을 가져오고 내보내는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-06-04 16:36 조회 1,883회 댓글 0건본문
관련링크
SpreadJS Blazor 컴포넌트 만들기
라이브러리 이름을 "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"로 바꿀 수 있습니다. 이 파일은 래퍼(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" 템플릿을 사용하여 새 프로젝트를 추가할 수 있습니다.
SpreadJS 컴포넌트를 추가하기 위해 솔루션 탐색기에서 새 프로젝트의 종속성을 마우스 오른쪽 버튼으로 클릭하고 "프로젝트 참조 추가"를 클릭합니다. SpreadJS_Blazor_Lib은 다음 옵션 중 하나로 나열되어야 합니다.
새 프로젝트에는 다른 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를 실행하는 데 필요한 작업이 모두 완료되었습니다.
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); } }
댓글목록
등록된 댓글이 없습니다.