Angular에서 SpreadJS 시작하기

SpreadJS는 클라이언트 측에서 TypeScript를 사용하는 웹 애플리케이션 프레임워크인 Angular를 지원합니다.

SpreadJS는 Angular 프로젝트에서 다음과 같은 방식으로 사용할 수 있습니다:

Node 패키지 매니저(NPM) 사용하기

이 방법은 다음 단계를 포함합니다:

1. Angular CLI를 전역으로 설치하기

   명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

   npm install -g @angular/cli

2. Angular CLI를 사용하여 새 프로젝트 생성하기

   다음 명령어로 새 프로젝트를 생성한 후, 프로젝트 디렉터리로 이동하세요:

   ng new spread-sheets-angular-cli --style css --ssr false
   cd spread-sheets-angular-cli

3. SpreadJS NPM 패키지 설치하기

   다음 명령어를 사용하여 SpreadJS NPM 패키지를 설치하세요:

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-angular

4. angular.json 파일에서 SpreadJS CSS 구성하기

   아래와 같이 angular.json 파일에서 SpreadJS CSS를 구성하세요:

   {
     ...
     "projects":{
       "spread-sheets-angular-cli":{
         ...
         "architect":{
           ...
           "build":{
             ...
             "options":{
               ...
               "styles": [
                 "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
               ],
               ...
             }
             ...
           }
           ...
         }
         ...
       }
     }
     ...
   }

5. Angular 애플리케이션에서 SpreadJS 사용하기

   SpreadJS 컴포넌트를 보기 위해 app.component.html 파일을 아래와 같이 수정하세요:

   <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
     <gc-worksheet [name]="sheetName" [dataSource]="data">
       <gc-column dataField="Name" width=300></gc-column>
       <gc-column dataField="Category" [width]=columnWidth></gc-column>
       <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>
       <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
     </gc-worksheet>
   </gc-spread-sheets>

   SpreadJS 컴포넌트를 위한 데이터 준비를 위해 app.component.ts 파일을 아래와 같이 수정하세요.

   컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.

   import { Component } from '@angular/core';
   import * as GC from "@mescius/spread-sheets";
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   
   // SpreadJS 라이선싱
   var SpreadJSKey = "xxx";          // 유효한 라이선스 키를 입력하세요.
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [SpreadSheetsModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     spreadBackColor = 'aliceblue';
     sheetName = 'Goods List';
     hostStyle = {
       width: '800px',
       height: '600px'
     };
     data = [
       { Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },
       { Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },
       { Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },
       { Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
       { Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
       { Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
     ];
     columnWidth = 100;
     workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }){
       let spread:GC.Spread.Sheets.Workbook = args.spread;
       let sheet = spread.getActiveSheet();
       sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
     }
   }

6. Angular CLI를 사용하여 프로젝트를 빌드하고 실행하세요.

   다음 명령어로 새 프로젝트를 빌드하고 실행하세요:

   ng serve

다음 항목들은 태그 계층 구조와 Spread 요소에 대한 추가 정보를 제공합니다.

1. 태그 계층 구조

2. Sheet 요소

3. Worksheet 요소

4. Column 요소

5. Excel IO 요소