Excel IO 요소

Angular에서 SpreadJS의 Excel IO 요소를 사용하면, Excel 시트를 웹페이지에 빠르게 렌더링하고 표시할 수 있으며, 가져오기 및 내보내기 작업도 간편하게 수행할 수 있습니다.

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. 프로젝트에 Excel IO Angular 모듈과 FileSaver Angular 모듈을 설치하세요.

   다음 명령어를 사용하여 프로젝트에 Excel I/O 및 file-saver 모듈을 설치하세요:

   npm install @mescius/spread-excelio
   npm install file-saver --save
   npm install @types/file-saver --save

5. 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"
               ],
               ...
             }
             ...
           }
           ...
         }
         ...
       }
     }
     ...
   }

6. Angular 애플리케이션에서 Excel IO 사용하기

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

   <div class='maincontainer'>
     <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
     </gc-spread-sheets>
     <div class='loadExcelInput'>
       <p>Open Excel File</p>
       <input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" />
     </div>
     <div class='exportExcel'>
       <p>Save Excel File</p>
       <button (click)="onClickMe($event)">Save Excel!</button>
     </div>
   </div>

   Excel IO 요소를 사용하고 SpreadJS 컴포넌트를 위한 데이터를 준비하기 위해 app.component.ts 파일을 아래와 같이 수정하세요:

   import { Component } from '@angular/core';
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   import * as GC from '@mescius/spread-sheets';
   import * as Excel from '@mescius/spread-excelio';
   import { saveAs } from 'file-saver';
   
   // 라이선스 정보
   var SpreadJSKey = "xxxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   // Excel IO 모듈에도 SpreadJS 라이선스 키를 설정해야 합니다.
   // GC 객체는 전역 객체에 마운트되어야 합니다.
   // 그래야 excelIO가 전역 GC 객체를 통해 라이선스를 받을 수 있습니다.
   (window as any).GC = GC;
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [SpreadSheetsModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     spreadBackColor = 'aliceblue';
     hostStyle = {
       width: '95vw',
       height: '80vh'
     };
     private spread!: GC.Spread.Sheets.Workbook;
     private excelIO;
     constructor() {
       this.excelIO = new Excel.IO();
     }
     workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }) {
       const self = this;
       self.spread = args.spread;
       const sheet = self.spread.getActiveSheet();
       sheet.getCell(0, 0).text('Test ExcelIO').foreColor('blue');
     }
     onFileChange(args: any) {
       const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
       if (self.spread && file) {
         self.excelIO.open(file, (json: Object) => {
           self.spread.fromJSON(json, {});
           setTimeout(() => {
             alert('Excel loaded successfully');
           }, 0);
         }, (error: any) => {
           alert('load fail');
         });
       }
     }
     onClickMe(args: any) {
       const self = this;
       const filename = 'ExportedExcel.xlsx';
       const json = JSON.stringify(self.spread.toJSON());
       self.excelIO.save(json, function (blob: any) {
         saveAs(blob, filename);
       }, function (e: any) {
         console.log(e);
       });
     }
   }

7. 프로젝트를 빌드하고 실행하세요.

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

   ng serve