Vue3에서 npm을 사용하여 SpreadJS 시작하기 > 온라인 스터디

본문 바로가기

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

페이지 정보

작성자 GrapeCity 작성일 21-12-07 13:37 조회 378회 댓글 0건

본문

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

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


Vue 앱 생성

  1. vue가 설치되어 있지 않은 경우, 우선 터미널을 열고, 원하는 폴더로 이동하여 아래와 같이 명령어를 입력하여 Vue Cli 를 설치합니다.

    npm install -g @vue/cli

  2. vue가 정상적으로 설치되었는지 확인하기 위해 아래 명령어를 입력합니다.

    vue --version
    • 이 때, 버전이 표시되면 정상적으로 설치된 것입니다.

    • 아래와 같은 에러가 발생하는 경우, 시스템의 스크립트 실행 권한을 변경해 주시기 바랍니다. Error : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

  3. 아래의 명령어를 입력하여 Vue 앱을 생성합니다.

    vue create sjs-vue3-app

    * sjs-vue3-app은 애플리케이션 이름입니다. 원하는 이름으로 설정하실 수 있습니다. * 이 때, Vue 3를 선택해 주시기 바랍니다. image-20211207095839698  

  4. "Successfully created project sjs-vue3-app." 이라는 문구가 보이면, 설치가 완료된 것입니다.

  5. cd sjs-vue3-app 을 입력하여 위에서 만든 애플리케이션의 루트 폴더로 이동한 후, npm run serve 를 입력하면, http://localhost:8080에서 아래와 같은 화면을 확인하실 수 있습니다.

    image-20211201172512088




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 컴포넌트 추가

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

image-20211207100321579

  1. src 폴더 내의 main.js 파일을 연 후, 아래와 같이 코드를 수정합니다.

    import { createApp } from 'vue'
    import App from './App.vue'
    import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'
    
    let app = createApp(App);
    app.component('gc-spread-sheets', GcSpreadSheets);
    app.component('gc-worksheet', GcWorksheet);
    app.component('gc-column', GcColumn);
    app.mount("#app");

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

    <template>
      <div id="spread-host">
        <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initSpread">
        </gc-spread-sheets>
      </div>
    </template>
    
    <script>
    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    ​
    export default {
      name: "app",
      components: {},
      data: function () {
        return {};
      },
      methods: {
        initSpread: function (spread) {
          this.spread = spread;
        },
      },
    };
    </script>
    
    <style>
    .spreadHost {
      width: 100%;
      height: 600px;
    }
    </style>

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




한국어 설정하기

  1. npm을 사용하여 한국어 리소스 패키지를 설치합니다.

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

  2. App.vue의 script 태그 내부에 아래의 코드를 입력하여 SpreadJS 패키지와 한국어 리소스 패키지를 import 합니다.

    import * as GC from "@grapecity/spread-sheets";
    import '@grapecity/spread-sheets-resources-ko';

  3. initSpread 함수에 아래의 코드를 입력합니다.

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

  1. 아래와 같이 한국어가 적용된 것을 확인하실 수 있습니다. image-20211207105628904


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



 

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

  1. initSpread 함수에 아래와 같이 코드를 입력하여 스프레드시트를 초기화합니다.

    initSpread: function (spread) {
     this.spread = spread;
       
     // 한국어 설정
     GC.Spread.Common.CultureManager.culture("ko-kr");
       
     // 컴포넌트 초기화
     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",
      ...
    },

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

    initSpread: function (spread) {
        this.spread = 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");
    },

  3. 아래와 같이 지정한 셀에 지정한 값이 삽입되어 있는 것을 확인하실 수 있습니다. image-20211207110155545




스타일 설정

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

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

    // 스타일 설정
    // 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);

  2. 아래와 같이 스타일이 적용된 것을 확인하실 수 있습니다. image-20211207110442961


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

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




데이터 바인딩

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

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

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

  1. addSheet 메서드를 사용하여 새로운 시트를 추가합니다.

    spread.addSheet(1);

  2. getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.

    var sheet2 = spread.getSheet(1);

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

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

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

    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

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

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

  6. setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.

    sheet2.setDataSource(source);

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

    initSpread: function (spread) {
        this.spread = 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);
    },

  8. 애플리케이션을 실행하여 Sheet2를 클릭하면, 아래와 같은 결과 화면을 확인하실 수 있습니다. image-20211207111502006




샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.

아래 샘플은 node-modules 폴더가 포함되어 있지 않으므로, npm install 후 실행시켜주시기 바랍니다.

Vue3 에서 SpreadJS 시작하기 샘플 다운로드


실행 :

npm install
npm run serve





지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

spjs.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.