Vue | 시작하기 | SpreadJS 데모

SpreadJS Vue 컴포넌트 시작하기

간단한 다음 단계를 수행하여 Vue 응용 프로그램에 Excel과 같은 스프레드시트를 포함합니다. 이러한 스프레드시트를 추가한 후에는 비즈니스 필요에 따라 완벽하게 사용자 정의할 수 있습니다.

단계

Vue 응용 프로그램 만들기 - 명령 프롬프트 창을 열고 다음 명령을 입력해 간단한 Vue 프로젝트를 만듭니다. 완료하면 Vue 프로젝트가 디렉터리의 지정 위치에 만들어집니다. Vue 프로젝트를 만드는 방법에 대해 더 자세히 알아보려면 Vue 빠른 시작 사이트를 참조하십시오.
```
npm init vue@latest //프로젝트 이름 지정: sjs-vue-app, 다른 프로젝트 옵션을 선택합니다.
cd sjs-vue-app
```
SpreadJS npm 패키지 설치 - Vue SpreadJS 컴포넌트는 @mescius/spread-sheets-vue npm 패키지를 통해 배포합니다. 기본 @mescius/spread-sheets 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
```
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```

Vue 응용 프로그램에서 SpreadJS 사용
아래 주어진 샘플 코드를 사용해 main.ts 파일을 수정합니다.

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
import './assets/main.css'

let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount("#app");

아래 주어진 샘플 코드를 사용해 App.vue 파일을 수정합니다.

<template>
  <div id="spread-host">
    <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
    </gc-spread-sheets>
  </div>
</template>

<script setup>
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
function initWorkbook(spread) {
  let sheet = spread.getActiveSheet();
  sheet
    .getCell(0, 0)
    .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    .value("Hello SpreadJS");
}
</script>

<style>
.spreadHost {
  width: 800px;
  height: 800px;
}
</style>

값 및 수식 설정

단계

setValue 메서드를 사용하여 셀의 값과 setFormula를 설정하여 계산합니다.

function initWorkbook(spread) {
  let sheet = spread.getActiveSheet();
  //값 설정하기 - Text
  sheet.setValue(1, 1, "값 설정하기");
  //값 설정하기 - Number
  sheet.setValue(2, 1, "Number");
  sheet.setValue(2, 2, 23);
  sheet.setValue(3, 1, "Text");
  sheet.setValue(3, 2, "GrapeCity");
  sheet.setValue(4, 1, "Datetime");
  //값 설정하기 - DateTime
  sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
}

스타일 설정

아래 함수를 사용하면 데이터의 모양을 보다 유용하고 매력적으로 바꿀 수 있습니다.

단계

이 단계에서 더 매력적으로 만들기 위해 시트의 스타일을 설정합니다.

function initWorkbook(spread) {
   //spread 초기화
   let sheet = spread.getActiveSheet();
   //값 설정하기 - Text
   sheet.setValue(1, 1, "값 설정하기");
   //값 설정하기 - Number 
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23)
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "GrapeCity")
   sheet.setValue(4, 1, "Datetime");
   //값 설정하기 - DateTime
   sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
   //스타일 설정하기
   sheet.setColumnWidth(1, 200);
   sheet.setColumnWidth(2, 200);
   sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
   sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
   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
   });
   sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
}

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법을 살펴봅니다.

단계

getSheet 메서드를 사용하여 작업 중인 시트를 가져옵니다. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 원본을 설정합니다. 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에서 지정된 셀의 바인딩 경로를 설정합니다. 그런 다음, setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.

function initWorkbook(spread) {
   var sheet = spread.getSheet(0);
   var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
   sheet.setBindingPath(2, 2, 'name');
   sheet.setBindingPath(3, 2, 'age');
   sheet.setBindingPath(4, 2, 'gender');
   sheet.setBindingPath(5, 2, 'address.postcode');
   sheet.setDataSource(source);
}