SpreadJS在线表格编辑器使用指南 -- 初始化

SpreadJS组件版设计器提供了更加灵活方便的使用方式，这里看下在普通HTML页面和VUE等前端框架中如何初始化设计器

• 一般HTML页面
  

1. 引入SpreadJS和设计器所有资源

    <link href=".lib/spreadjs/hosted/css/gc.spread.sheets.excel2013white.14.0.0.css" rel="stylesheet" type="text/css" />
    <link href="./lib/designer/css/gc.spread.sheets.designer.14.0.0.min.css" rel="stylesheet" type="text/css">




<script type="text/javascript" src="./lib/spreadjs/hosted/scripts/gc.spread.sheets.all.14.0.0.min.js"></script>
<script src="./lib/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.14.0.0.min.js"></script>
<script src="./lib/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.14.0.0.min.js"></script>

<script src="./lib/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.14.0.0.min.js"></script>
<script src="./lib/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.14.0.0.min.js"></script>
<script src="./lib/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.14.0.0.min.js"></script>
<script src="./lib/spreadjs/hosted/scripts/interop/gc.spread.excelio.14.0.0.min.js"></script>
<script src="./lib/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.14.0.0.min.js"></script>

<script src="./lib/designer/scripts/gc.spread.sheets.designer.resource.cn.14.0.0.min.js"></script>
<script src="./lib/designer/scripts/gc.spread.sheets.designer.all.14.0.0.min.js"></script>



2. 页面添加设计器容器

    <div id="gc-designer-container">
    </div>



容器大小将决定设计器最终大小，这个示例会充满页面
    <style type="text/css">
        html,
        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #gc-designer-container {
            height: 100%;
        }
    </style>



3. 初始化设计器

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), undefined, undefined);


初始化传入三个参数host, config, spread
host: 初始化时的容器
config：设计器的配置，后续自定义按钮等内容就是配置这里，设置undefined为默认
spread：如果页面本身已经初始化过spread对象，这里可以指定spread，设置undefined，有designer初始化spreadjs表格

• 框架集成，以VUE为例
  

1. npm引入资源


    "@grapecity/spread-sheets-designer-vue": "14.0.0",
    "@grapecity/spread-sheets-designer": "14.0.0",
    "@grapecity/spread-sheets-designer-resources-cn": "14.0.0",
    "@grapecity/spread-sheets": "14.0.0",
    "@grapecity/spread-excelio": "14.0.0",
    "@grapecity/spread-sheets-barcode": "14.0.0",
    "@grapecity/spread-sheets-charts": "14.0.0",
    "@grapecity/spread-sheets-languagepackages": "14.0.0",
    "@grapecity/spread-sheets-print": "14.0.0",
    "@grapecity/spread-sheets-pdf": "14.0.0",
    "@grapecity/spread-sheets-shapes": "14.0.0",
    "@grapecity/spread-sheets-pivots": "14.0.0"
    "@grapecity/spread-sheets-resources-cn": "14.0.0"


2. import 资源

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import { Designer } from '@grapecity/spread-sheets-designer-vue'
export default {
  name: 'App',
  data: function () {
    return {
      styleInfo: {height:'800px', width: '1200px', border: 'solid red 1px'},
      config: null,
      designer: null
    };
  },
  methods:{
    designerInitialized(value){
      this.designer = value;
    }
  }
}





3. 模板中使用designer 组件
<template>
  <div id="app">
    <gc-spread-sheets-designer
    :styleInfo='styleInfo'
    :config='config'
    @designerInitialized="designerInitialized">
    </gc-spread-sheets-designer>
  </div>
</template>




新的设计器集成十分快捷灵活，运行也更块。后续将介绍关于config的配置。

vue3版本：
1、首先在script标签中引入相关文件

1. import '@grapecity/spread-sheets-designer-resources-cn'
   
2. import * as GC from "@grapecity/spread-sheets";
   
3. import Designer from "@grapecity/spread-sheets-designer-vue"

复制代码

2、设置data和components数据

1. export default {
   
2.     name:'MyDesigner',
   
3.     components:{
   
4.         GcSpreadSheetsDesigner: Designer
   
5.      },
   
6.      data() {
   
7.          return {
   
8.               styleInfo: { height: "98vh", width: "100%" },
   
9.               config: GC.Spread.Sheets.Designer.DefaultConfig,
   
10.               spreadOptions: {
    
11.                   sheetCount: 2,
    
12.               },
    
13.              designer: null,
    
14.          };
    
15.      },
    
16.     methods: {
    
17.         designerInitialized(value){
    
18.             this.designer = value;
    
19.         }
    
20.      },
    
21. };

复制代码

3、template

1. <template>
   
2.     <div id="gc-designer-container">
   
3.         <gc-spread-sheets-designer
   
4.             :styleInfo="styleInfo"
   
5.            :config="config"
   
6.            :spreadOptions="spreadOptions"
   
7.            @designerInitialized="designerInitialized"/>
   
8.     </div>
   
9. </template>

复制代码

4、style

1. <style lang='less' scoped>
   
2. @import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   
3. @import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
   
4. </style>

复制代码

您好，
请问您的问题是什么呢？如果是想了解vue3中如何初始化deisgner，可以在官网下载产品包，内有示例demo。
https://www.grapecity.com.cn/developer/spreadjs
需注意，vue3中支持使用designer标签是V15.1的新特性，请注意产品版本。