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

// 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