Angular 스프레드시트 만들기 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

Angular 스프레드시트 만들기

페이지 정보

작성자 GrapeCity 작성일 21-04-09 10:37 조회 229회 댓글 0건

본문

SpreadJS는 매우 강력한 스프레드시트 컴포넌트로서, 기본 Excel .xlsx 파일 가져오기 및 내보내기와 같은 완전한 스프레드시트 기능을 응용 프로그램에 손쉽게 추가할 수 있게 해줍니다. SpreadJS는 프레임워크 독립적입니다. 따라서 Angular를 비롯한 몇 가지 JavaScript 프레임워크 내에서 SpreadJS를 손쉽게 사용할 수 있습니다.


SpreadJS를 사용해 Angular에 Excel 스프레드시트를 만드는 방법을 자세히 설명하는 자습서를 만들었습니다.


Spread JavaScript


프로젝트 설정

먼저 Excel 스프레드시트에 추가할 Angular 프로젝트를 설정해야 합니다. 이 자습서에서는 Angular 10 프로젝트를 사용하겠습니다.


1. ng new 프로젝트 이름을 사용해 새로운 Angular 10 프로젝트를 만듭니다. 이 예시에서는 프로젝트 이름을 spreadJS-angular로 지정하겠습니다.

ng new spreadJS-angular



2. 이제 디렉터리를 새 프로젝트로 변경합니다.

cd spreadJS-angular


3. 다음과 같이 프로젝트를 실행합니다.

ng serve –open


Angular 10 시작 페이지가 이제 http://localhost:4200/으로 제공되고 있습니다.


SpreadJS를 Angular 프로젝트에 추가:


Angular 10 프로젝트를 시작하여 실행하였으므로 이제 시작 페이지 콘텐츠를 제거하고 SpreadJS를 프로젝트에 추가하여 Angular 스프레드시트를 만들겠습니다.


1. 다음과 같이 npm 패키지를 사용해 SpreadJS를 설치합니다.

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


2. 아래와 같이 angular.json에서 SpreadJS의 CSS를 구성합니다.

{  
...  
"projects":{  
  "spread-sheets-angular-cli":{  
    ...  
    "architect":{  
      ...  
      "build":{  
        ...  
        options:{  
          ...  
          "styles": [  
            "[node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css](mailto:node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css)"  
          ],  
          ...  
        }  
        ...  
      }  
      ...  
    }  
    ...  
  }  
}  
...  
}


1. 이제 응용 프로그램에서 SpreadJS를 사용해 보겠습니다. SpreadJS 모듈을 가져오기 위해 module.ts를 수정합니다.

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule } from "@angular/core";
​
import { AppComponent } from "./app.component";
​
import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
​
@NgModule({  
declarations: [AppComponent],  
imports: [BrowserModule, SpreadSheetsModule],  
providers: [],  
bootstrap: [AppComponent],  
})  
export class AppModule {}


2. 다음과 같이 SpreadJS 컴포넌트를 보기 위해 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>


3. 다음과 같이 SpreadJS 컴포넌트에 맞춰 데이터를 준비하기 위해 component.ts를 수정합니다.

import { Component } from "@angular/core";  
import * as GC from "@grapecity/spread-sheets";  
@Component({  
selector: "app-root",  
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) {  
  let spread: GC.Spread.Sheets.Workbook = args.spread;  
  let sheet = spread.getActiveSheet();  
  sheet.getCell(0, 0).text("My SpreadJS Angular Project").foreColor("blue");  
}  
}


4. ng serve -open을 실행합니다.

브라우저에서 http://localhost:4200/으로 이동하면 다음과 같이 SpreadJS 컴포넌트가 항목 목록과 함께 표시됩니다.

json 데이터


참고: 다음과 같은 오류가 표시되는 경우:

코드 오류


이러한 오류는 Angular 래퍼 TypeScript 소스 파일을 프로젝트로 복사한 후 파일 모듈로 참조하여 수정할 수 있습니다.


다음 단계를 따르시면 됩니다.


  1. npm를 설치합니다.

  2. spread.sheets.angular.ts*(이 파일만)**를 _nodemodules/@grapecity/spread-sheets-angular* 폴더에서 src/component/spread-sheets-angular 폴더로 복사합니다.

  3. 다음과 같이 module.ts를 수정합니다.

    // import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
    ​
    import { SpreadSheetsModule } from "../component/spread-sheets-angular/gc.spread.sheets.angular";

이제 오류가 보이지 않습니다!


최신 SpreadJS 릴리스 평가판을 다운로드하여 Angular 프레임워크에 대한 지원이 포함된 SpreadJS를 얻을 수 있습니다. 궁금한 점은 한국의 GrapeCity의 기술 관련 팀이 해결해 드립니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.