SpreadJS Angular 컴포넌트 시작하기

간단한 다음 단계를 수행하여 Angular 응용 프로그램에 Excel과 같은 스프레드시트를 포함합니다. 이러한 스프레드시트를 추가한 후에는 비즈니스 필요에 따라 완벽하게 사용자 정의할 수 있습니다.

단계

  1. Angular 응용 프로그램 만들기 - Angular CLI를 사용하여 새 Angular 응용 프로그램을 만듭니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 미리 설정된 기본값을 사용해 Angular 응용 프로그램을 만듭니다. 자세한 내용은 Angular 사이트에서 옵션을 참조하십시오.
    ng new sjs-angular-app --defaults
    cd sjs-angular-app
  2. SpreadJS npm 패키지 설치 - Angular SpreadJS 컴포넌트는 @mescius/spread-sheets-angular npm 패키지를 통해 배포합니다. 주요 @mescius/spread-sheets 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
    npm install @mescius/spread-sheets-angular @mescius/spread-sheets
    //yarn을 사용한다면
    yarn add @mescius/spread-sheets-angular @mescius/spread-sheets
    
  3. SpreadJS Angular 모듈 등록- src\app\app.module.ts 파일을 열고 이 파일의 내용을 다음 코드로 바꿉니다. 이 코드는 표준 모듈 외에 SpreadJS 모듈도 등록합니다.
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent } from './app.component';
    import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule, SpreadSheetsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  4. 응용 프로그램에 SpreadJS Angular 컴포넌트 추가/스프레드시트 초기화 - src\app\app.component.ts를 열고 이 파일의 내용을 다음 코드로 바꿉니다.
    import { Component } from '@angular/core';
    import * as GC from "@mescius/spread-sheets";
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'sjs-angular-app';
      spread: GC.Spread.Sheets.Workbook;
      hostStyle = {
        width: '100%',
        height: '500px'
      };
    
      //Initialization
      workbookInit($event: any) {
        //initialize the spread
        this.spread = $event.spread;
      }
    }
    
    //만약 spread에 빨간 밑줄이 생긴다면 tsconfig.json 파일에 아래 코드를 추가하세요.
    //"strictPropertyInitialization": false
  5. 응용 프로그램에 SpreadJS Angular 템플릿 추가 - src\app\app.component.html을 열고 이 파일의 내용을 다음 코드로 바꿉니다.
    <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
    </gc-spread-sheets>
  6. Angular 응용 프로그램에 SpreadJS CSS 추가 - angular.json을 열고 SpreadJS CSS를 전역 스타일 노드에 추가합니다.
    "styles": [
        "src/styles.css",
        "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    ]
SpreadJS를 실행하려면 HTML5 Canvas를 완벽하게 지원하는 브라우저가 필요합니다.

한국어 설정하기

단계

  1. npm을 사용하여 한국어 리소스 패키지를 설치합니다.
    npm install @mescius/spread-sheets-resources-ko
  2. app.component.ts의 script 태그 내부에 아래의 코드를 입력하여 Spreadjs 패키지를 import 합니다.
    import * as GC from "@mescius/spread-sheets";
  3. 또한, 아래의 코드를 추가하여 한국어 리소스 패키지를 import 합니다.
    import '@mescius/spread-sheets-resources-ko';
  4. workbookInit 함수에 아래의 코드를 입력합니다.
    GC.Spread.Common.CultureManager.culture("ko-kr");
SpreadJS 데모 - 지역화 및 세계화 자세히 보기

값 및 수식 설정

단계

  1. setValue 메소드를 사용하여 셀의 값을 설정하고 setFormula를 사용하여 계산합니다.
    workbookInit($event: any) {
      //spread 초기화
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //값 설정하기 - Text
      sheet.setValue(1, 1, "값 설정하기");
      //값 설정하기 - Number 
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      //값 설정하기 - Text : B4에 "Text" 라는 텍스트를, C4에 "SpreadJS"라는 텍스트를 삽입합니다.
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "SpreadJS")
      sheet.setValue(4, 1, "Datetime");
      //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("yyyy-mm-dd");
    }
SpreadJS를 실행하려면 HTML5 Canvas를 완벽하게 지원하는 브라우저가 필요합니다.

스타일 설정

SpreadJS에서 제공하는 함수를 사용하면 데이터의 모양을 보다 유용하고 매력적으로 바꿀 수 있습니다.

단계

  1. 이 단계에서 더 매력적으로 만들기 위해 시트의 스타일을 설정합니다.

    workbookInit($event: any) {
      //spread 초기화
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //값 설정하기 - Text
      sheet.setValue(1, 1, "값 설정하기");
      //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      //값 설정하기 - Text : B4에 "Text" 라는 텍스트를, C4에 "SpreadJS"라는 텍스트를 삽입합니다.
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "SpreadJS")
      sheet.setValue(4, 1, "Datetime");
      //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("yyyy-mm-dd");
      //스타일 설정하기
      // B열, C열의 너비를 200으로 설정합니다.
      sheet.setColumnWidth(1, 200);
      sheet.setColumnWidth(2, 200);
      // B2:C2의 배경색과 글자색을 설정합니다.
      sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
      // B4:C4의 배경색을 설정합니다.
      sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
      // B2:C2의 셀을 병합합니다.
      sheet.addSpan(1, 1, 1, 2);
      // 각 범위에 테두리를 설정합니다.
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
      });
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
      });
      // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
      sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }
SpreadJS를 실행하려면 HTML5 Canvas를 완벽하게 지원하는 브라우저가 필요합니다.

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.
workbookInit 함수 내부에 이어서 작성합니다.

단계

  1. addSheet 메서드를 사용하여 새로운 시트를 추가합니다.
    spread.addSheet(1);
  2. getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.
    var sheet2 = this.spread.getSheet(1);
  3. person이라는 데이터를 입력해 줍니다.
    var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } };
  4. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 소스를 설정합니다.
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
  5. 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.
    workbookInit($event: any) {
       sheet2.setBindingPath(2, 2, 'name');
       sheet2.setBindingPath(3, 2, 'age');
       sheet2.setBindingPath(4, 2, 'gender');
       sheet2.setBindingPath(5, 2, 'address.postcode');
      }
  6. setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
    workbookInit($event: any) {
       sheet2.setDataSource(source);
      }
SpreadJS를 실행하려면 HTML5 Canvas를 완벽하게 지원하는 브라우저가 필요합니다.

샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.
아래 샘플은 node-modules 가 포함되어 있지 않으므로, npm install 후 실행시켜주시기 바랍니다.
npm install
ng serve
Angular에서 SpreadJS 시작하기 샘플 다운로드
H