# spreadjs 官方教程

合集·前端表格控件SpreadJS全方位讲解 (opens new window)

# 1. 什么是 SpreadJS

说明：

纯前端 Excel 控件

SpreadJS 组成分为：

设计器
运行时

doc_01

# 2. 引入

spreajs v14

# 2.1. 原生 JS 引入

引入资源：

参考：SpreadJS 中文文档 > 快速开始 > SpreadJS 组件库 (opens new window)

实例化运行时：

参考： SpreadJS 示例 > 功能例子 > 工作簿 > 初始化Spread (opens new window)

代码：

window.onload = function () {
  // host the workbook control in a DIV element with id "ss"
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
    sheetCount: 1
  });

  /*
  * retrieve the spread workbook object from the host element using findControl static method.
  * var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
  */
  initSpread(spread);
};

function initSpread(spread) {
  var sheet = spread.getActiveSheet();
  //Add text to first cell
  sheet.setValue(0, 0, "Hello World!");
}

本地化：

参考：SpreadJS 示例 > 功能例子 > 文化 > 本地化 (opens new window)

代码：

// 1. 引入对应语言资源

// 2. 设置语言
GC.Spread.Common.CultureManager.culture("zh-cn");

# 2.2. vue 引入

# 2.2.1. 依赖

{
  "dependencies": {
    "vue": "^3.4.21",
    
    "@grapecity/spread-sheets": "^16.1.4",
    "@grapecity/spread-sheets-vue": "^16.1.4",
    "@grapecity/spread-excelio": "^16.1.4",
    "@grapecity/spread-sheets-charts": "^16.1.4",
    "@grapecity/spread-sheets-print": "^16.1.4",
    "@grapecity/spread-sheets-pdf": "^16.1.4",
    "@grapecity/spread-sheets-barcode": "^16.1.4",
    "@grapecity/spread-sheets-shapes": "^16.1.4",

    "@grapecity/spread-sheets-resources-zh": "^16.1.4",
    "@grapecity/spread-sheets-languagepackages": "^16.1.4",

    "@grapecity/spread-sheets-io": "^16.1.4",
    "@grapecity/spread-sheets-designer": "^16.1.4",
    "@grapecity/spread-sheets-designer-resources-cn": "^16.1.4",
    "@grapecity/spread-sheets-designer-resources-en": "^16.1.4",
    "@grapecity/spread-sheets-designer-vue": "^16.1.4",
    "@grapecity/spread-sheets-pivot-addon": "^16.1.4",
    "@grapecity/spread-sheets-tablesheet": "^16.1.4"
  },
}

# 2.2.2. 引入运行时

<template>
    <GcSpreadSheets
      hostClass="gc-box"
      @workbookInitialized="initWorkbook"
    >
      <GcWorksheet></GcWorksheet>
      <GcWorksheet></GcWorksheet>
    </GcSpreadSheets>
</template>
<style>
.gc-box {
  height: 98vh;
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'

export default defineComponent({
  components: {
    GcSpreadSheets,
    GcWorksheet,
    GcColumn,
  },

  methods: {
    initWorkbook(spread: GC.Spread.Sheets.Workbook) {
      let sheet = spread.getActiveSheet();
      sheet
        .getCell(0, 0)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .value("Hello SpreadJS");
    }
  }
});
</script>

参考：

# 2.2.3. 标签属性和事件

参考：

SpreadJS 中文文档 > 框架中开发 > Vue > Gc-spread-sheets元素 (opens new window)

# 2.2.4. 引入设计器

<template>
    <Designer
      :styleInfo="styleInfo"
      :config="config"
      :spreadOptions="spreadOptions"
      @designerInitialized="designerInitialized"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

import type IGC from '@grapecity/spread-sheets-designer/dist/gc.spread.sheets.designer.d';

import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-vue';
import '@grapecity/spread-sheets-designer-resources-en';
import * as ExcelIO from '@grapecity/spread-excelio';
import Designer from '@grapecity/spread-sheets-designer-vue';

import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

export default defineComponent({
  components: { Designer },

  data() {
    return {
      styleInfo: { height: "100vh", width: "100vw" },
      config: (GC.Spread.Sheets as any).Designer.DefaultConfig as IGC.Spread.Sheets.Designer.IDesignerConfig,
      spreadOptions: {
        sheetCount: 2,
      },
    }
  },

  methods: {
    designerInitialized(designer: IGC.Spread.Sheets.Designer.Designer) {
      const spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
      let sheet = spread.getActiveSheet();
      sheet
        .getCell(0, 0)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .value("Hello SpreadJS");
    }
  }
});
</script>

参考：

SpreadJS 中文文档 > 表格设计器 > 设计器组件 > JavaScript框架 > Vue (opens new window)

# 3. 工作簿操作

spread 也叫做工作簿（workbook）

# 3.1. 配置信息设置

# 3.1.1. 构造函数

语法：

// host: SpreadJS 所在的 DOM 容器或者 ID
new Workbook(host: string | HTMLElement, options: Spread.Sheets.IWorkBookDefaultOptions): Spread.Sheets.Workbook

示例：

var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount:3, newTabVisible:false });

参考：

SpreadJS 中文文档 > GC.Spread.Sheets > Classes > Workbook (opens new window)

# 3.1.2. options 属性

类型：

GC.Spread.Sheets.IWorkbookOptions

说明：

sheetCount          - sheet 的数量

allowUserDragDrop   - 是否允许用户拖放区域数据。拖拽移动单元格里的内容
allowUserDragFill   - 是否允许用户拖动填充区域。光标置于单元格右下角，拖拽可复制单元格内容
allowUserResize     - 是否允许用户调整列和行的大小
allowContextMenu    - 是否允许用户打开内置上下文菜单。右键菜单

showHorizontalScrollbar - 是否显示水平滚动条
showVerticalScrollbar   - 是否显示垂直滚动条
scrollbarShowMax        - 显示的滚动条是否基于表单中的完整列数和行数。true 时，越往下滚滚动条越小；false 时，一直那么大
scrollbarMaxAlign       - 滚动条是否与活动表单的最后一行和一列对齐。true 时，滚动到底部，有大量空白区域

tabStripVisible - 是否显示表单选项卡条。底部 sheet 名称 tab 页是否显示
tabEditable     - 是否允许用户编辑工作表标签条。是否可以给 sheet 重命名

showDragDropTip - 是否显示拖放提示。光标样式

allowUserEditFormula - 用户是否可以在表单的单元格中编辑公式。

calcOnDemand - 是否只在需要时才计算公式

resizeZeroIndicator - 将行或列的大小调整为零时的绘制策略。Spread.Sheets.ResizeZeroIndicator

参考：

SpreadJS 中文文档 > GC.Spread.Sheets > Interfaces > IWorkbookOptions (opens new window)

# 3.2. 工作表

本章目录