Angular 개발자를 위한 글로벌 No.1 Excel 컴포넌트

1. Angular 앱 폴더로 이동 후, SpreadJS 라이브러리를 설치합니다.

npm install @mescius/spread-sheets

npm install @mescius/spread-sheets-angular

2. SpreadJS 스타일 적용을 위한 css 파일을 추가합니다.

작업을 진행할 Angular 앱 angular.json 파일에 접근하여, SpreadJS css 파일을 추가합니다.

여러가지 css 파일 중 원하는 스타일의 css 파일을 추가합니다. (전체 테마 확인하기)

// angular.json

"options": {

    ...

    "styles": [

        "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"

    ],

    ...

}

3. 한국 문화권을 설정해 줍니다.

1) 한국어 리소스 패키지를 설치합니다.

npm install @mescius/spread-sheets-resources-ko

2) app.component.ts 파일 상단에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.

// app.component.ts

import     '@mescius/spread-sheets-resources-ko'       ;

3) 아래의 코드를 추가합니다.

// app.component.ts

GC.Spread.Common.CultureManager.culture("ko-kr");

4. SpreadJS 컨트롤을 초기화하고, 화면에 추가합니다.

SpreadJS 컨트롤을 초기화하고, 화면에 SpreadJS 컨트롤을 표시할 수 있도록 코드를 작성합니다.

app.component.html 파일과 app.component.ts 파일의 코드를 수정합니다.

전체 코드는 아래 샘플을 확인해 주세요.

5. Angular 앱을 실행하여 결과를 확인합니다.

npm start