SpreadJS 集成使用案例

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单元格变化:

js 复制代码
// 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

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

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

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>
相关推荐
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花3 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ3 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六3 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保3 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~3 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
建群新人小猿4 小时前
会员等级经验问题
android·开发语言·前端·javascript·php