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

Nuxt v3 기준

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

npm install @mescius/spread-sheets-vue

2. SpreadSheet.vue 파일을 생성합니다.

애플리케이션의 루트 폴더에 있는 components 폴더에, SpreadSheet.vue 파일을 생성합니다. 
* 애플리케이션 루트 폴더에 components 라는 폴더가 없다면 새로 생성합니다.

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

방금 생성한 components/SpreadSheet.vue 파일의 script 영역에, SpreadJS css 파일을 추가합니다.
여러가지 css 파일 중 원하는 스타일의 css 파일을 추가합니다. (전체 테마 확인하기)

// SpreadSheet.vue

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

4. SpreadJS는 서버 사이드 렌더링(SSR)을 지원하지 않으므로, 컴포넌트가 클라이언트 측에서만 렌더링 되도록 설정합니다.

nuxt.config.ts 파일에 아래와 같이 { ssr: false } 설정을 추가합니다.

// nuxt.config.ts

export default defineNuxtConfig({

    ssr: false,

})

5. SpreadJS 모듈을 추가합니다.

components/SpreadSheet.vue 파일의 script 영역에 아래와 같이 SpreadJS 모듈을 추가합니다.

// SpreadSheet.vue

import { GcSpreadSheets } from '@mescius/spread-sheets-vue' ;

import * as GC from "@mescius/spread-sheets";

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

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

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

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

// SpreadSheet.vue

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

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

// SpreadSheet.vue

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

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

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

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

8. Nuxt 앱을 실행하여 결과를 확인합니다.

npm run dev

Nuxt 앱을 실행하면 아래와 같이 스프레드시트가 추가된 것을 확인하실 수 있습니다.