[]
Vue 애플리케이션에 SpreadJS 디자이너 컴포넌트를 추가하려면 다음 단계를 수행하세요:
명령 프롬프트에서 다음 명령어를 입력해 Vue 프로젝트를 생성하세요.
npm init vue@latest
해당 명령어를 실행하면 프로젝트 이름과 Vue 프로젝트에 추가할 수 있는 기타 선택적 기능들을 입력하는 프롬프트가 표시됩니다.
프로젝트에 다음 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
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');
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>
애플리케이션을 실행하세요.
npm run dev
명령 프롬프트에서 다음 명령어를 입력해 Vue 프로젝트를 생성하세요.
npm init vue@latest sjs-designer-vue-app
cd sjs-designer-vue-app
해당 명령어를 실행하면 Vue 프로젝트에 추가할 수 있는 기타 선택적 기능들을 선택하라는 프롬프트가 표시됩니다.
"Add TypeScript" 질문에 대해 Yes를 선택하세요.
다음 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
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>
애플리케이션을 실행하세요.
npm run dev
명령 프롬프트에서 다음 명령어들을 입력해 Vue 프로젝트를 생성하세요.
npm install -g @vue/cli
npm i -g @vue/cli-init
vue init webpack designercomponent
cd designercomponent
npm run dev
프로젝트에 다음 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
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>
애플리케이션을 실행하세요.
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'