Vue

您可以执行以下步骤在 Vue 应用程序中添加 SpreadJS 组件版设计器:

Vue 3

1. 通过在命令提示符中键入以下命令来创建 Vue 项目。

npm init vue@latest

该命令将提示项目名称和其他可以添加到 Vue 项目的可选功能。

2. 在项目中导入以下 SpreadJS 和 SpreadJS Designer Vue 模块。

npm install @grapecity-software/spread-sheets-designer-resources-cn
npm install @grapecity-software/spread-sheets-designer
npm install @grapecity-software/spread-sheets-designer-vue
npm install @grapecity-software/spread-sheets
npm install @grapecity-software/spread-excelio
npm install @grapecity-software/spread-sheets-barcode
npm install @grapecity-software/spread-sheets-charts
npm install @grapecity-software/spread-sheets-languagepackages
npm install @grapecity-software/spread-sheets-print
npm install @grapecity-software/spread-sheets-pdf
npm install @grapecity-software/spread-sheets-shapes
npm install @grapecity-software/spread-sheets-pivot-addon
npm install @grapecity-software/spread-sheets-tablesheet

3. 在 main.js 文件中将 SpreadJS Designer Vue 组件注册到应用程序。

import { createApp } from 'vue'
import App from './App.vue'
import Designer from "@grapecity-software/spread-sheets-designer-vue"
let app = createApp(App);
app.component("gc-spread-sheets-designer", Designer);
app.mount('#app');

4. 通过修改 App.vue 文件将 SpreadJS Designer Vue 组件添加到应用程序中。

<script setup>
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity-software/spread-sheets";
import "@grapecity-software/spread-sheets-print";
import "@grapecity-software/spread-sheets-shapes";
import "@grapecity-software/spread-sheets-pivot-addon";
import "@grapecity-software/spread-sheets-tablesheet";
import "@grapecity-software/spread-sheets-designer-resources-en";
import "@grapecity-software/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

Vue 2

1. 通过在命令提示符中键入以下命令来创建 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 @grapecity-software/spread-excelio
npm install @grapecity-software/spread-sheets
npm install @grapecity-software/spread-sheets-barcode
npm install @grapecity-software/spread-sheets-charts
npm install @grapecity-software/spread-sheets-languagepackages
npm install @grapecity-software/spread-sheets-pdf
npm install @grapecity-software/spread-sheets-print
npm install @grapecity-software/spread-sheets-shapes
npm install @grapecity-software/spread-sheets-tablesheet
npm install @grapecity-software/spread-sheets-pivot-addon
npm install @grapecity-software/spread-sheets-designer
npm install @grapecity-software/spread-sheets-designer-resources-en
npm install @grapecity-software/spread-sheets-vue
npm install @grapecity-software/spread-sheets-designer-vue

3. 使用 App.vue 中的以下代码片段导入所需的模块并将设计器标记添加到模板中。

<!--Add designer tag into the template-->
<template>
    <div id="app">
    <gc-spread-sheets-designer :styleInfo='styleInfo'
                                :config='config'
                                @designerInitialized="designerInitialized">
    </gc-spread-sheets-designer>
  </div>
</template>
<script>

// import the required modules
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity-software/spread-sheets-designer-resources-en'
import '@grapecity-software/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 Designer 组件的所有功能。您需要为 SpreadJS、ExcelIO 和 Designer 组件设置许可证密钥，这可以使用以下代码片段来完成。

import '@grapecity-software/spread-sheets-designer-resources-en'
import { Designer } from '@grapecity-software/spread-sheets-designer-vue'
import * as GC from '@grapecity-software/spread-sheets'
import * as ExcelIO from '@grapecity-software/spread-excelio'
// license keys
var sjsLicense = 'sjs-distribution-key'
GC.Spread.Sheets.LicenseKey = sjsLicense
ExcelIO.LicenseKey = sjsLicense
GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key'