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

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

npm install @mescius/spread-sheets

npm install @mescius/spread-sheets-vue

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

작업을 진행할 Vue 앱 App.vue 파일에 접근하여, SpreadJS css 파일을 추가합니다.

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

// App.vue

import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

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

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

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

2) App.vue 파일의 <script></script> 태그 내에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.

// App.vue

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

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

// App.vue

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

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

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

아래 샘플에서 상세한 코드를 확인해 주세요.

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

npm run serve