Vue2에서 npm을 사용하여 SpreadJS 시작하기

기초가이드 Vue2에서 npm을 사용하여 SpreadJS 시작하기

추천0

페이지 정보

작성자 MESCIUS

작성일 2021-12-07 08:22 조회 1,539회 댓글 0건

본문

첨부파일

sjs-vue-app.zip (313.4K)

관련링크

https://www.youtube.com/watch?v=U5tSVdh6SNk

Vue2에서 SpreadJS를 시작하는 방법에 대해 설명합니다.

* Vue 3에서 SpreadJS를 시작하는 방법에 대해 알아보고 싶으신 경우, 아래 글을 참고해 주세요.

Vue 3에서 npm을 사용하여 SpreadJS 시작하기

Vue 앱 생성

vue가 설치되어 있지 않은 경우, 우선 터미널을 열고, 원하는 폴더로 이동하여 아래와 같이 명령어를 입력하여 Vue Cli 를 설치합니다.
```
npm install -g @vue/cli
```
vue가 정상적으로 설치되었는지 확인하기 위해 아래 명령어를 입력합니다.
```
vue --version
```
- 이 때, 버전이 표시되면 정상적으로 설치된 것입니다.
- 아래와 같은 에러가 발생하는 경우, 시스템의 스크립트 실행 권한을 변경해 주시기 바랍니다. Error : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
아래의 명령어를 입력하여 Vue 앱을 생성합니다.
```
vue create sjs-vue-app
```
* sjs-vue-app은 애플리케이션 이름입니다. 원하는 이름으로 설정하실 수 있습니다.
"Successfully created project sjs-vue-app." 이라는 문구가 보이면, 설치가 완료된 것입니다.
cd sjs-vue-app 을 입력하여 위에서 만든 애플리케이션의 루트 폴더로 이동한 후, npm run serve 를 입력하면, http://localhost:8080에서 아래와 같은 화면을 확인하실 수 있습니다.

SpreadJS npm 패키지 설치

Vue SpreadJS 컴포넌트는 @grapecity/spread-sheets-vue npm 패키지를 통해 배포됩니다.

주요 @grapecity/spread-sheets 패키지는 핵심 기능을 제공합니다.

이 패키지들의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

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

* 특정 버전의 SpreadJS npm 패키지를 설치하고자 하는 경우, npm install 패키지명@버전 으로 설치하실 수 있습니다.

예를 들어, @grapecity/spread-sheets-vue v14.2.0과 @grapecity/spread-sheets v14.2.0을 설치하려면 다음의 명령을 실행해 주세요.

npm install @grapecity/spread-sheets-vue@14.2.0 @grapecity/spread-sheets@14.2.0

▶ @grapecity/spread-sheets-vue 버전 히스토리

▶ @grapecity/spread-sheets 버전 히스토리

SpreadJS Vue 컴포넌트 추가

위에서 만든 폴더를 확인해 보면, 아래와 같이 구성되어 있습니다.

src 폴더 내의 App.vue 파일을 연 후, App.vue 내부의 내용을 아래 코드로 대체합니다.

<template>
 <div>
   <gc-spread-sheets
     :hostClass="hostClass"
     @workbookInitialized="initWorkbook"
   >
   </gc-spread-sheets>
 </div>
</template>

<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity/spread-sheets-vue";

export default {
  name: "App",
  data() {
    return {
      hostClass: "spread-host",
    };
  },
  methods: {
    initWorkbook: function () {
        
    },
  },
};
</script>

<style>
.spread-host {
  width: 100%;
  height: 600px;
}
</style>

그런 다음 다시 npm run serve 명령어를 통해 애플리케이션을 실행시키면, 아래와 같이 너비는 100%, 높이는 600px인 스프레드시트가 표시되는 것을 확인하실 수 있습니다.

한국어 설정하기

npm을 사용하여 한국어 리소스 패키지를 설치합니다.
```
npm install @grapecity/spread-sheets-resources-ko
```
App.vue의 script 태그 내부에 아래의 코드를 입력하여 SpreadJS 패키지와 한국어 리소스 패키지를 import 합니다.
```
import * as GC from "@grapecity/spread-sheets";
import '@grapecity/spread-sheets-resources-ko';
```
initWorkbook 함수에 아래의 코드를 입력합니다.
```
GC.Spread.Common.CultureManager.culture("ko-kr");
```

▶ SpreadJS 데모 - 지역화 및 세계화 자세히 보기

스프레드시트 초기화 및 값 설정

initWorkbook 함수에 매개변수로 spread 를 넣어준 후, 아래의 코드를 입력하여 스프레드시트를 초기화합니다.
```
initWorkbook: function (spread) {
  let sheet = spread.getActiveSheet();
}
```
* 여기까지만 입력하고 실행을 하면, 경우에 따라 아래와 같은 에러가 발생할 수 있습니다. Error : 'sheet' is assigned a value but never used
이는 eslint 에러로, 다음 단계에서 선언한 변수들에 값을 할당하면 문제 없이 동작하게 되므로 계속 진행해 주시기 바랍니다.
위의 eslint 검사를 해제하고 싶으신 경우, packgage.json에서 아래와 같이 설정해 주시면 됩니다.
```
...
"scripts" : {
 "serve": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
 ...
},
```

아래와 같이 initWorkbook 함수를 작성하여 원하는 위치의 셀에 값을 설정해줄 수 있습니다.

initWorkbook: function (spread) {
   // 한국어 설정
   GC.Spread.Common.CultureManager.culture("ko-kr");

   // 컴포넌트 초기화
   let sheet = spread.getActiveSheet();
   
   sheet.setValue(1, 1, "값 설정하기");
   // 값 설정 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23);
   // 값 설정 - Text : B4에 "Text" 라는 텍스트를, C4에 "GrapeCity"라는 텍스트를 삽입합니다.
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "GrapeCity");
   // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
   sheet.setValue(4, 1, "Datetime");
   sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
},

아래와 같은 결과 화면을 확인하실 수 있습니다.

스타일 설정

SpreadJS에서 제공하는 함수를 사용하면 데이터를 보다 유용하고 매력적으로 표시할 수 있습니다.

아래와 같이 시트의 스타일을 설정합니다. 위에서 작성하던 initWorkbook 함수 내부에 이어서 작성합니다.

// 스타일 설정
// B열, C열의 너비를 200으로 설정합니다.
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 200);
// B2:C2의 배경색과 글자색을 설정합니다.
sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
// B4:C4의 배경색을 설정합니다.
sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
// B2:C2의 셀을 병합합니다.
sheet.addSpan(1, 1, 1, 2);
// 각 범위에 테두리를 설정합니다.
sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
   all: true
});
sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
   inside: true
});
// B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);

아래와 같은 결과 화면을 확인하실 수 있습니다.

아래 링크를 통해 사용자 정의 가능한 다양한 설정에 대해 학습하실 수 있습니다.

▶ SpreadJS 데모 - 워크시트 설정 자세히 보기

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.

해당 작업은 새로운 시트를 열어서 시작하도록 하겠습니다.

위에서 작성하던 initWorkbook 함수 내부에 이어서 작성합니다.

addSheet 메서드를 사용하여 새로운 시트를 추가합니다.
```
spread.addSheet(1);
```
getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.
```
var sheet2 = spread.getSheet(1);
```

person이라는 데이터를 입력해 줍니다.

var person = { name: '홍길동', age: 25, gender: 'Male', address: { postcode: '10001' } };

"new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 소스를 설정합니다.
```
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
```

그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.

sheet2.setBindingPath(2, 2, 'name');
sheet2.setBindingPath(3, 2, 'age');
sheet2.setBindingPath(4, 2, 'gender');
sheet2.setBindingPath(5, 2, 'address.postcode');

setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
```
sheet2.setDataSource(source);
```

여기까지 작성한 initWorkbook 함수의 전체 코드는 아래와 같습니다.

initWorkbook: function (spread) {
   // 한국어 설정
   GC.Spread.Common.CultureManager.culture("ko-kr");

   // 컴포넌트 초기화
   let sheet = spread.getActiveSheet();
   sheet.setValue(1, 1, "값 설정하기");

   // 값 설정 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23);
   // 값 설정 - Text : B4에 "Text" 라는 텍스트를, C4에 "GrapeCity"라는 텍스트를 삽입합니다.
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "GrapeCity");
   // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
   sheet.setValue(4, 1, "Datetime");
   sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
   
   // 스타일 설정
   // B열, C열의 너비를 200으로 설정합니다.
   sheet.setColumnWidth(1, 200);
   sheet.setColumnWidth(2, 200);
   // B2:C2의 배경색과 글자색을 설정합니다.
   sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
   // B4:C4의 배경색을 설정합니다.
   sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
   // B2:C2의 셀을 병합합니다.
   sheet.addSpan(1, 1, 1, 2);
   // 각 범위에 테두리를 설정합니다.
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
     all: true
  });
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
     inside: true
  });
   // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
   sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
   
   // 데이터 바인딩
   // 새로운 시트를 추가합니다.
   spread.addSheet(1);

   // 추가한 시트를 가져옵니다.
   var sheet2 = spread.getSheet(1);

   // 데이터를 입력합니다.
   var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } };

   // 셀 바인딩 소스를 설정합니다.
   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

   // 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.
   sheet2.setBindingPath(2, 2, 'name');
   sheet2.setBindingPath(3, 2, 'age');
   sheet2.setBindingPath(4, 2, 'gender');
   sheet2.setBindingPath(5, 2, 'address.postcode');

   // 시트의 데이터 소스를 설정합니다.
   sheet2.setDataSource(source);

},