Vue集成SpreadJS实现Excel（高级详解）

<template>
  <div>
    <h2>Vue 集成 SpreadJS 示例</h2>
    <div ref="spreadSheetHost" style="width: 100%; height: 400px;"></div>
  </div>
</template>
 
<script>
import 'spreadjs-designer/designer.css';
import 'spreadjs-sheets/style/sheets.css';
import GC from 'spreadjs-gc';
import Spread from 'spreadjs-sheets';
 
export default {
  name: 'SpreadSheetDemo',
  mounted() {
    this.initSpreadSheet();
  },
  methods: {
    initSpreadSheet() {
      const spread = new GC.Spread.Sheets.Workbook(this.$refs.spreadSheetHost);
      // 设置 SpreadJS 的许可证密钥
      GC.Spread.Common.LicenseKey = '你的SpreadJS许可证密钥';
 
      // 设置工作表数量和名称
      spread.fromJSON({
        "sheets": [
          {
            "name": "Sheet1",
            "rows": 50,
            "columns": 20,
            "cells": [
              {
                "row": 0,
                "column": 0,
                "value": "Hello SpreadJS!"
              }
            ]
          }
        ]
      });
 
      // 设置 SpreadJS 的主题
      spread.options.theme = GC.Spread.Sheets.Theme.lightTheme;
 
      // 初始化 SpreadJS 组件
      spread.refresh();
    }
  }
};
</script>

这个代码实例展示了如何在Vue应用程序中初始化SpreadJS电子表格组件，并设置基本的工作表属性。在实际应用中，你需要替换"你的SpreadJS许可证密钥"为你从GrapeCity购买的有效许可证密钥。这个例子设置了一个包含一个工作表的简单电子表格，并在单元格A1中插入了文本"Hello SpreadJS!"。