[]
        
(Showing Draft Content)

Vue

Vue 애플리케이션에 SpreadJS 디자이너 컴포넌트를 추가하려면 다음 단계를 수행하세요:

Vue 3

  1. 명령 프롬프트에서 다음 명령어를 입력해 Vue 프로젝트를 생성하세요.

    npm init vue@latest

    해당 명령어를 실행하면 프로젝트 이름과 Vue 프로젝트에 추가할 수 있는 기타 선택적 기능들을 입력하는 프롬프트가 표시됩니다.

  2. 프로젝트에 다음 SpreadJS 및 SpreadJS 디자이너 컴포넌트 Vue 모듈을 임포트하세요.

    npm install @mescius/spread-sheets-designer
    npm install @mescius/spread-sheets-designer-resources-ko
    npm install @mescius/spread-sheets-designer-vue
    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-io
    npm install @mescius/spread-sheets-barcode
    npm install @mescius/spread-sheets-charts
    npm install @mescius/spread-sheets-languagepackages
    npm install @mescius/spread-sheets-print
    npm install @mescius/spread-sheets-pdf
    npm install @mescius/spread-sheets-shapes
    npm install @mescius/spread-sheets-pivot-addon
    npm install @mescius/spread-sheets-tablesheet
  3. main.js 파일에서 SpreadJS 디자이너 컴포넌트 Vue 모듈을 애플리케이션에 등록하세요.

    import { createApp } from 'vue'
    import App from './App.vue'
    import Designer from "@mescius/spread-sheets-designer-vue"
    let app = createApp(App);
    app.component("gc-spread-sheets-designer", Designer);
    app.mount('#app');
  4. App.vue 파일을 수정하여 SpreadJS 디자이너 컴포넌트 Vue 모듈을 애플리케이션에 추가하세요.

    <script setup>
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    import * as GC from "@mescius/spread-sheets";
    import "@mescius/spread-sheets-print";
    import "@mescius/spread-sheets-shapes";
    import "@mescius/spread-sheets-pivot-addon";
    import "@mescius/spread-sheets-tablesheet";
    import "@mescius/spread-sheets-designer-resources-ko";
    import "@mescius/spread-sheets-designer";
    </script>
    <script>
    export default {
      name: "App",
      data: function () {
        return {
          styleInfo: { height: "98vh", width: "100%" },
          config: config,
          spreadOptions: {
            sheetCount: 2,
          },
          designer: null,
        };
      },
      methods: {
        designerInitialized(value) {
          this.designer = value;
        },
      },
    };
    </script>
    <template>
      <div id="gc-designer-container">
        <gc-spread-sheets-designer
          :styleInfo="styleInfo"
          :config="config"
          :spreadOptions="spreadOptions"
          @designerInitialized="designerInitialized"/>
      </div>
    </template>
    <style>
    </style>
  5. 애플리케이션을 실행하세요.

    npm run dev

Typescript와 Vue 사용하기

  1. 명령 프롬프트에서 다음 명령어를 입력해 Vue 프로젝트를 생성하세요.

    npm init vue@latest sjs-designer-vue-app
    cd sjs-designer-vue-app

    해당 명령어를 실행하면 Vue 프로젝트에 추가할 수 있는 기타 선택적 기능들을 선택하라는 프롬프트가 표시됩니다.

  2. "Add TypeScript" 질문에 대해 Yes를 선택하세요.


    vue3 with ts in designer.001944


  3. 다음 npm 패키지들을 설치하세요.

    npm install
    npm install @mescius/spread-sheets-designer
    npm install @mescius/spread-sheets-designer-resources-ko
    npm install @mescius/spread-sheets-designer-vue
    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-barcode
    npm install @mescius/spread-sheets-shapes
    npm install @mescius/spread-sheets-charts
    npm install @mescius/spread-sheets-slicers
    npm install @mescius/spread-sheets-languagepackages
    npm install @mescius/spread-sheets-print
    npm install @mescius/spread-sheets-pdf
    npm install @mescius/spread-sheets-pivot-addon
    npm install @mescius/spread-sheets-tablesheet
    npm install @mescius/spread-sheets-ganttsheet
    npm install @mescius/spread-sheets-reportsheet-addon
    npm install @mescius/spread-sheets-formula-panel
    npm install @mescius/spread-sheets-io
  4. App.vue 파일을 수정하여 SpreadJS 디자이너 컴포넌트 Vue 모듈을 애플리케이션에 추가하고, <script setup>을 사용해 TypeScript로 작성하세요.

    <template>
      <div id="app">
        <Designer :styleInfo="styleInfo" :config="config" :spreadOptions="spreadOptions"
          @designerInitialized="designerInitialized">
        </Designer>
      </div>
    </template>
    
    <script setup lang="ts">
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    import * as GC from "@mescius/spread-sheets";
    import "@mescius/spread-sheets-print";
    import "@mescius/spread-sheets-shapes";
    import "@mescius/spread-sheets-charts";
    import "@mescius/spread-sheets-slicers";
    import "@mescius/spread-sheets-pivot-addon";
    import "@mescius/spread-sheets-tablesheet";
    import "@mescius/spread-sheets-ganttsheet";
    import "@mescius/spread-sheets-reportsheet-addon";
    import "@mescius/spread-sheets-formula-panel";
    import "@mescius/spread-sheets-io";
    import "@mescius/spread-sheets-designer-resources-ko";
    import Designer from "@mescius/spread-sheets-designer-vue";
    
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const config = (GC.Spread.Sheets as any).Designer.DefaultConfig;
    
    if ((config).ribbon[0].buttonGroups[0].commandGroup.children[0].commands[0] !== "Welcome") {
      config.commandMap = {
        Welcome: {
          title: "Welcome",
          text: "Welcome",
          iconClass: "ribbon-button-welcome",
          bigButton: true,
          commandName: "Welcome",
          execute: async () => {
            alert("Welcome to new designer.");
          },
        },
      };
    
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (config as any).ribbon[0].buttonGroups.unshift({
        label: "NewDesigner",
        thumbnailClass: "welcome",
        commandGroup: {
          children: [
            {
              direction: "vertical",
              commands: ["Welcome"],
            },
          ],
        },
      });
    }
    
    const styleInfo = { height: "98vh", width: "100%" };
    const spreadOptions = {
      sheetCount: 3,
    };
    
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    function designerInitialized(value: any) {
      const spread: GC.Spread.Sheets.Workbook = value.getWorkbook();
      const activeSheet = spread.getActiveSheet();
      activeSheet.setValue(0, 0, "Sample");
    }
    
    </script>
  5. 애플리케이션을 실행하세요.

    npm run dev

Vue 2

  1. 명령 프롬프트에서 다음 명령어들을 입력해 Vue 프로젝트를 생성하세요.

    npm install -g @vue/cli
    npm i -g @vue/cli-init
    vue init webpack designercomponent
    cd designercomponent
    npm run dev
  2. 프로젝트에 다음 SpreadJS 및 디자이너 컴포넌트 Vue 모듈들을 임포트하세요.

    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-barcode
    npm install @mescius/spread-sheets-charts
    npm install @mescius/spread-sheets-languagepackages
    npm install @mescius/spread-sheets-pdf
    npm install @mescius/spread-sheets-print
    npm install @mescius/spread-sheets-shapes
    npm install @mescius/spread-sheets-tablesheet
    npm install @mescius/spread-sheets-pivot-addon
    npm install @mescius/spread-sheets-designer
    npm install @mescius/spread-sheets-designer-resources-ko
    npm install @mescius/spread-sheets-vue
    npm install @mescius/spread-sheets-designer-vue 
    npm install @mescius/spread-sheets-io
  3. App.vue에서 필요한 모듈을 임포트하고, 아래 코드 조각을 사용해 템플릿에 designer 태그를 추가하세요.

    <!--템플릿에 designer 태그를 추가하세요.-->
    <template>
      <div id="app">
        <gc-spread-sheets-designer :styleInfo='styleInfo'
                                   :config='config'
                                   @designerInitialized="designerInitialized">
        </gc-spread-sheets-designer>
      </div>
    </template>
    <script>
    // 필요한 모듈을 임포트하세요.
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
    import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
    import '@mescius/spread-sheets-designer-resources-en'
    import '@mescius/spread-sheets-designer-vue'
    export default {
      name: 'App',
      data: function () {
        return {
          styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' },
          config: null,
          designer: null
        }
      },
      methods: {
        designerInitialized (value) {
          this.designer = value
        }
      }
    }
    </script>
  4. 애플리케이션을 실행하세요.

    npm run dev

라이선스 적용하기

정식 라이선스를 적용하면 SpreadJS 디자이너 컴포넌트의 모든 기능을 사용할 수 있습니다. SpreadJS와 디자이너 컴포넌트의 라이선스 키를 설정해야 하며, 다음 코드 조각을 사용해 설정할 수 있습니다.

import '@mescius/spread-sheets-designer-resources-en';
import { Designer } from '@mescius/spread-sheets-designer-vue';
import * as GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-io";

var sjsLicense = 'sjs-distribution-key'
GC.Spread.Sheets.LicenseKey = sjsLicense
GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key'