SpreadJS 集成使用案例

最新推荐文章于 2025-06-21 07:56:59 发布

zq_Hero

最新推荐文章于 2025-06-21 07:56:59 发布

阅读量2.6k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： [Web] 文章标签： vue js javascript spreadJs

本文链接：https://blog.csdn.net/u013233097/article/details/135253232

[Web] 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中集成SpreadJS，包括创建项目、安装所需插件、在界面中添加Ribbon工具栏、监听单元格变化和处理JSON数据的转换，提供了一个完整的案例和关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpreadJS 集成案例

介绍：

SpreadJS 基于 HTML5 标准，支持跨平台开发和集成，支持所有主流浏览器，无需预装任何插件或第三方组件，以原生的方式嵌入各类应用，可以与各类后端技术框架相结合。SpreadJS 以纯前端、跨平台的能力，让应用系统轻松获得与原生
Excel 一致的交互体验。前端集成：

实现效果：

在这里插入图片描述

代码实现：

1) : 创建项目

Cmd 依次执行命令:

C:\Users\zhaoQiang\Desktop>vue create spreadjs

C:\Users\zhaoQiang\Desktop>cd spreadjs

安装插件：

npm install 以下插件: 或根据使用需求安装所需要的插件:

在这里插入图片描述

Main.js引用：

在这里插入图片描述

App.vue编写界面：

在这里插入图片描述

2) Ribbon工具栏添加测试菜单和事件

在这里插入图片描述

3) 监听Excel单元格变化：

// SpreadJs 初始化完毕事件中获取WorkBook对象。
this.designer = value;
this.spread = this.designer.getWorkbook();

监听单元格选中事件和单元格编辑结束事件：

在这里插入图片描述

4) JSON数据转换：

本地JSON数据转换为界面上表格：

在这里插入图片描述

表格界面获取JSON数据：

在这里插入图片描述

代码地址

https://gitee.com/zhaoqhero/spreadjs.

官方文档

官网地址：https://www.grapecity.com.cn/developer/spreadjs

API文档：https://demo.grapecity.com.cn/spreadjs/help/api/modules/GC.Data

官方案例：https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-vue

附图

在这里插入图片描述

主要代码

Package.json

{
  "name": "spreadjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@grapecity/spread-excelio": "^17.0.0",
    "@grapecity/spread-sheets": "^17.0.0",
    "@grapecity/spread-sheets-barcode": "^17.0.0",
    "@grapecity/spread-sheets-charts": "^17.0.0",
    "@grapecity/spread-sheets-designer": "^17.0.0",
    "@grapecity/spread-sheets-designer-resources-cn": "^17.0.0",
    "@grapecity/spread-sheets-designer-resources-en": "^17.0.0",
    "@grapecity/spread-sheets-designer-vue": "^17.0.0",
    "@grapecity/spread-sheets-io": "^17.0.0",
    "@grapecity/spread-sheets-languagepackages": "^17.0.0",
    "@grapecity/spread-sheets-pdf": "^17.0.0",
    "@grapecity/spread-sheets-pivot-addon": "^17.0.0",
    "@grapecity/spread-sheets-print": "^17.0.0",
    "@grapecity/spread-sheets-shapes": "^17.0.0",
    "@grapecity/spread-sheets-tablesheet": "^17.0.0",
    "@grapecity/spread-sheets-vue": "^17.0.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Main.js

import {createApp} from 'vue'
import App from './App.vue'
import Designer from "@grapecity/spread-sheets-designer-vue"

let app = createApp(App);
app.component("gc-spread-sheets-designer", Designer);
app.mount('#app');

App.vue


<template>
  <div id="gc-designer-container" style="display: flex;flex-direction: row">
    <div>
      <gc-spread-sheets-designer
          id="designer"
          :styleInfo="styleInfo"
          :config="config"
          :spreadOptions="spreadOptions"
          @designerInitialized="designerInitialized">
      </gc-spread-sheets-designer>
    </div>
    <div>
      <div class="textarea-container">{{ changingText }}</div>
      <div class="textarea-container">{{ currentTxt }}</div>
      <button style="height: 40px;margin-left:20px;width: 100px" @click="fromJson">json数据添加</button>
      <button style="height: 40px;margin-left:20px;width: 100px" @click="toJson">json数据获取</button>

      <div class="textarea-container" style="height: 400px">{{ sheetJsonStr }}</div>
    </div>
  </div>
</template>

<script>

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-designer-resources-cn";
import "@grapecity/spread-sheets-designer";

import demoJson from './demo.json';

export default {
  name: "App",
  data: function () {
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    //ribbon添加测试菜单：
    config.ribbon.push({
      "id": "test",
      "text": "测试菜单",
      "buttonGroups": [{
        "label": "测试1",
        "thumbnailClass": "button_class",
        "commandGroup": {
          "children": [
            {
              "direction": "vertical",
              "commands": [
                "save1",
                "delete1",
              ]
            }
          ]
        }
      }, {
        "label": "测试2",
        "commandGroup": {
          "children": []
        }
      }],
      // 其他项目内容
      "contextMenu": [
        "designer.insertSignature",
      ],
    });
    //声明菜单事件
    config.commandMap = {
      save1: {
        title: "保存服务器",
        text: "",
        iconClass: "save1",
        bigButton: "true",
        commandName: "save1",
        execute: async (context, propertyName, fontItalicChecked) => {
          // 自定义操作符
          alert(context, propertyName, fontItalicChecked);
        }
      },
      delete1: {
        title: "删除数据",
        text: "",
        iconClass: "delete1",
        bigButton: "true",
        commandName: "delete1",
        execute: async (context, propertyName, fontItalicChecked) => {
          // 自定义操作符
          alert(context, propertyName, fontItalicChecked);
        }
      },
      "designer.insertSignature": {
        text: "Insert Signature",
        commandName: "designer.insertSignature",
        visibleContext: "ClickRowHeader",
        execute:
        // execute_InsertSignature，后面是一个简单的演示代码片段
            () => {
              console.log("Insert Signature");
            }
      }
    }

    return {
      styleInfo: {height: "80vh", width: "50vw"},
      config: config,
      spreadOptions: {
        //表单工具栏的  基本配置
        sheetCount: 2,  //sheet 表格数量
        allowUserZoom: false,  //是否允许缩放
        tabEditable: false,  //tab是否允许编辑
        newTabVisible: false, //新tab是否可见
        showScrollTip: false,
        showVerticalScrollbar: false,
        showHorizontalScrollbar: false,
        allowUserResize: false,
        autoFitType: false,
        allowUserDragDrop: false,  //允许用户拖拽单元格
        allowUserDragMerge: false, //允许用户合并单元格
      },

      changingText: '',
      currentTxt: '',
      sheetJsonStr: '',

      designer: null,
      spread: null,
    };
  },
  methods: {
    designerInitialized(value) {
      this.designer = value;
      this.spread = this.designer.getWorkbook();

      this.spread.suspendPaint();
      let spreadNS = GC.Spread.Sheets;
      let thisObj = this;

      this.spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
        let selection = args.newSelections.pop();
        let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ?
            'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
        thisObj.changingText =
            `事件名称:${GC.Spread.Sheets.Events.SelectionChanging}。` +
            `表单:${args.sheetName}。` +
            `表格区域:${sheetArea}。` +
            `行:${selection.row}。` +
            `列:${selection.col}。` +
            `行数:${selection.rowCount}。` +
            `列数:${selection.colCount}。`;
      });
      this.spread.bind(spreadNS.Events.EditEnded, function (e, args) {
        thisObj.currentTxt = `事件名称:${GC.Spread.Sheets.Events.EditEnded}。` +
            `表单:${args.sheetName}。` +
            `行:${args.row}。` +
            `列:${args.col}。` +
            `文本:${args.editingText}。`;
        console.log(this.currentTxt)
      });
      this.spread.resumePaint();

      // spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) {
      //   let eventLog =
      //       'SpreadEvent: ' + GC.Spread.Sheets.Events.ActiveSheetChanged + ' event called' + '\n' +
      //       'oldSheetName: ' + args.oldSheet.name() + '\n' +
      //       'newSheetName: ' + args.newSheet.name();
      //   console.log(eventLog)
      // });

      // spread.bind(spreadNS.Events.CellClick, function (e, args) {
      //   let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
      //   let eventLog =
      //       'SpreadEvent: ' + GC.Spread.Sheets.Events.CellClick + ' event called' + '\n' +
      //       'sheetArea: ' + sheetArea + '\n' +
      //       'row: ' + args.row + '\n' +
      //       'col: ' + args.col;
      //   console.log(eventLog)
      // });
      // spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
      //   let selection = args.newSelections.pop();
      //   let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
      //   let eventLog =
      //       'SpreadEvent: ' + GC.Spread.Sheets.Events.SelectionChanging + ' event called' + '\n' +
      //       'sheetArea: ' + sheetArea + '\n' +
      //       'row: ' + selection.row + '\n' +
      //       'column: ' + selection.col + '\n' +
      //       'rowCount: ' + selection.rowCount + '\n' +
      //       'colCount: ' + selection.colCount;
      //
      //   console.log(eventLog)
      // });
      // spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
      //   let selection = args.newSelections.pop();
      //   if (selection.rowCount > 1 && selection.colCount > 1) {
      //     let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
      //     let eventLog =
      //         'SpreadEvent: ' + GC.Spread.Sheets.Events.SelectionChanged + ' event called' + '\n' +
      //         'sheetArea: ' + sheetArea + '\n' +
      //         'row: ' + selection.row + '\n' +
      //         'column: ' + selection.col + '\n' +
      //         'rowCount: ' + selection.rowCount + '\n' +
      //         'colCount: ' + selection.colCount;
      //     console.log(eventLog)
      //   }
      // });
      // spread.bind(spreadNS.Events.EditStarting, function (e, args) {
      //   let eventLog =
      //       'SpreadEvent: ' + GC.Spread.Sheets.Events.EditStarting + ' event called' + '\n' +
      //       'row: ' + args.row + '\n' +
      //       'column: ' + args.col;
      //
      //   console.log(eventLog)
      // });

    },
    toJson() {
      var serializationOption = {
        ignoreFormula: true, //忽略？
        ignoreStyle: true,   //忽略样式
        rowHeadersAsFrozenColumns: true,
        columnHeadersAsFrozenRows: true,
      };

      this.sheetJsonStr = JSON.stringify(this.designer.getWorkbook().toJSON(serializationOption));
      console.log(this.sheetJsonStr)
    },
    fromJson() {
      let jsonOptions = {
        ignoreFormula: false,
        ignoreStyle: false,
        frozenColumnsAsRowHeaders: false,
        frozenRowsAsColumnHeaders: false,
        doNotRecalculateAfterLoad: false,
      };
      //FromJson
      let spread2 = this.designer.getWorkbook();
      spread2.fromJSON(JSON.parse(JSON.stringify(demoJson)), jsonOptions);
    },
  },
}
</script>


<style>

.textarea-container {
  margin: 20px;
  width: calc(100vw - 60vw);
  height: 50px;
  border: 1px solid #000000;
  color: black;
  overflow: auto;
}

.delete1 {
  width: 100px !important;
  height: 20px;
  background: red;
}

.save1 {
  width: 100px !important;
  height: 20px;
  background: blue;
}
</style>