[]
DEMOS DOC DESIGNER API
DOWNLOAD
(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'