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


<template><div id="gc-designer-container" style="display: flex;flex-direction: row"><div><gc-spread-sheets-designerid="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,};//FromJsonlet 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打开相机失败 出现错误的原因

如何解决&#xff1f; Debug中缺少DLL文件 以下参考周姐文档 相机调用步骤 学习相机第三方库的安装 https://blog.csdn.net/Qingshan_z/article/details/117257136书签&#xff1a;QT添加库&#xff08;静态库和动态库&#xff09;_Qingshan_z的博客-CSDN博客_qt添加库 添加文…

ASUS华硕ROG幻16 2023款GU603VU VV VI笔记本电脑原厂Win11.22H2系统

链接&#xff1a;https://pan.baidu.com/s/1AgevUZleCHBJgCBcIp5CFQ?pwdhjxy 提取码&#xff1a;hjxy 华硕笔记本2023款幻16原厂Windows11系统自带所有驱动、出厂主题壁纸、Office办公软件、MyASUS华硕电脑管家、Armoury Crate奥创控制中心等预装程序 文件格式&#xff1…

WEB渗透—PHP反序列化(九)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

网络隔离后,怎样建立高效安全的数据安全交换通道?

数据安全对企业生存发展有着举足轻重的影响&#xff0c;数据资产的外泄、破坏都会导致企业无可挽回的经济损失和核心竞争力缺失。数据流动才能让其释放价值&#xff0c;想要保护企业核心资产&#xff0c;就要实现数据安全交换。 很多企业为了防止知识产权、商业机密数据泄露&am…

树莓派安装Nginx搭建web服务器结合内网穿透实现无公网IP远程访问本地站点

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…

errors包返回堆栈信息的性能测试

errors包返回堆栈信息的性能测试 上一篇Golang中使用errors返回调用堆栈信息 讲了使用第三方开源库的errors github.com/go-errors/errors&#xff0c;错误信息带调用栈&#xff0c;方便定位错误的抛出位置。 通过堆栈的信息来定位是方便了&#xff0c;性能怎么样&#xff0c…

Pandas教程(三)—— 数据清洗与准备

1.处理缺失值 1.1 数据删除函数 作用&#xff1a;删除Dataframe某行或某列的数据 语法&#xff1a;df.drop&#xff08; labels [ ] &#xff09; drop函数的几个参数&#xff1a; labels &#xff1a;接收一个列表&#xff0c;内含删除行 / 列的索引编号或索引名 axis &…

抖音、小红书、视频号是如何判定是否限流的?

在这个新媒体营销的时代&#xff0c;抖音、小红书和视频号作为中国最受欢迎的社交媒体平台&#xff0c;为品牌和内容创作者提供了极具潜力的展示空间。然而&#xff0c;无论在哪个平台&#xff0c;限流成为很多人的苦恼。 抖音的推荐算法基于人群画像和初始流量池&#xff0c;同…

k8s的二进制部署(源码包部署)

实验条件&#xff1a; 主机名 IP地址 组件 作用 master01 20.0.0.17 kube-apiserver、kube-controller-manager、kube-scheduler、etcd k8s部署 master02 20.0.0.27 kube-apiserver、kube-controller-manager、kube-scheduler node01 20.0.0.37 kubelet、kube-pro…

Java开发框架和中间件面试题(10)

目录 104.怎么保证缓存和数据库数据的一致性&#xff1f; 105.什么是缓存穿透&#xff0c;什么是缓存雪崩&#xff1f;怎么解决&#xff1f; 106.如何对数据库进行优化&#xff1f; 107.使用索引时有哪些原则&#xff1f; 108.存储过程如何进行优化&#xff1f; 109.说说…

JVM高频面试题(2023最新版)

JVM面试题 1、JVM内存区域 Jvm包含两个子系统和两个组件。 1.1子系统 Class loader&#xff08;类加载器&#xff09;&#xff1a;根据给定的全限定名类名&#xff08;java.lang.object&#xff09;来装载class文件到Runtime data area&#xff08;运行时数据区&#xff09;…

医院安全(不良)事件报告系统源码 支持二次开发、支持源码交付

医疗不良事件报告系统源码旨在建立全面的、统一的医疗不良事件标准分类系统和患者安全术语&#xff0c;使不良事件上报管理更加标准化和科学化。通过借鉴国内外医疗不良事件报告系统的先进经验&#xff0c;根据医疗不良事件的事件类型、处理事件的不同部门&#xff0c;灵活设置…

【python 的各种模块】(8) 在python使用matplotlib和wordcloud库来画wordcloud词云图

目录 目标&#xff1a;用python画出&#xff0c;网上流行的wordcloud词云图 1 准备工作 1.1环境准备 1.1.1安装步骤 1.2 资源准备 1.2.1 文本文件内容如下 1.2.2 图片资源 2 代码测试 2.1 第一版代码和效果 2.1.1 代码和效果 2.1.2 一般plt里解决中文乱码问题 2.1…

Java中XML的解析

1.采用第三方开元工具dom4j完成 使用步骤 1.导包dom4j的jar包 2.add as lib.... 3.创建核心对象, 读取xml得到Document对象 SAXReader sr new SAXReader(); Document doc sr.read(String path); 4.根据Document获取根元素对象 Element root doc.getRootElement(); …

win11 or win10 安装Ubuntu 22.04.3 LTS 子系统

** 1. 修改电脑的相关设置 ** 1.在系统设置中的开发者人员模式&#xff0c;设置为开启状态 2. 在控制面板中的程序中的启用或者关闭windows功能下&#xff0c;开启&#xff08;勾选&#xff09;子系统模式&#xff0c;然后重启电脑 2. 在Microsoft store中下载子系统&…

深度学习 | DRNN、BRNN、LSTM、GRU

1、深度循环神经网络 1.1、基本思想 能捕捉数据中更复杂模式并更好地处理长期依赖关系。 深度分层模型比浅层模型更有效率。 Deep RNN比传统RNN表征能力更强。 那么该如何引入深层结构呢&#xff1f; 传统的RNN在每个时间步的迭代都可以分为三个部分&#xff1a; 1.2、三种深层…

算法与数据结构--特殊有序集的线性时间排序算法

一.计数排序算法 基本思想&#xff1a;统计每个输入元素的个数&#xff0c;然后根据这些计数值重构原数组。 使用范围&#xff1a;需要知道元素大小范围&#xff0c;就是最大值是多少。 【排序算法】计数排序_哔哩哔哩_bilibili 二.基数排序 使用场景&#xff1a;只适用于…

Laravel的知识点

1.{{ }} 是在 HTML 中内嵌 PHP 的 Blade 语法标识符&#xff0c;表示包含在该区块内的代码都将使用 PHP 来编译运行。 2.两种写法 3.return void 在这段注释中&#xff0c;"return void" 表示该函数或方法没有返回值。这意味着它执行某些操作或任务&#xff0c;但…

论文阅读《Rethinking Efficient Lane Detection via Curve Modeling》

目录 Abstract 1. Introduction 2. Related Work 3. BezierLaneNet 3.1. Overview 3.2. Feature Flip Fusion 3.3. End-to-end Fit of a Bezier Curve 4. Experiments 4.1. Datasets 4.2. Evalutaion Metics 4.3. Implementation Details 4.4. Comparisons 4.5. A…

使用克魔助手进行iOS数据抓包和HTTP抓包的方法详解

摘要 本文博客将介绍如何在iOS环境下使用克魔助手进行数据抓包和HTTP抓包。通过抓包&#xff0c;开发者可以分析移动应用程序的网络请求发送和接收过程&#xff0c;识别潜在的性能和安全问题&#xff0c;提高应用的质量和安全性。 引言 在移动应用程序的开发和测试过程中&am…