信誉好的福州网站建设,企业门户网站建设 北京,网站开发需求用什么软件,jsp电子商务网站开发源码SpreadJS 集成案例
介绍#xff1a;
SpreadJS 基于 HTML5 标准#xff0c;支持跨平台开发和集成#xff0c;支持所有主流浏览器#xff0c;无需预装任何插件或第三方组件#xff0c;以原生的方式嵌入各类应用#xff0c;可以与各类后端技术框架相结合。SpreadJS 以 纯前…SpreadJS 集成案例
介绍
SpreadJS 基于 HTML5 标准支持跨平台开发和集成支持所有主流浏览器无需预装任何插件或第三方组件以原生的方式嵌入各类应用可以与各类后端技术框架相结合。SpreadJS 以 纯前端、跨平台的能力让应用系统轻松获得与原生 Excel 一致的交互体验。 前端集成
实现效果 代码实现
1) : 创建项目
Cmd 依次执行命令:
C:\Users\zhaoQiang\Desktopvue create spreadjs
C:\Users\zhaoQiang\Desktopcd 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-vuelet app createApp(App);
app.component(gc-spread-sheets-designer, Designer);
app.mount(#app);App.vue templatediv idgc-designer-container styledisplay: flex;flex-direction: rowdivgc-spread-sheets-designeriddesigner:styleInfostyleInfo:configconfig:spreadOptionsspreadOptionsdesignerInitializeddesignerInitialized/gc-spread-sheets-designer/divdivdiv classtextarea-container{{ changingText }}/divdiv classtextarea-container{{ currentTxt }}/divbutton styleheight: 40px;margin-left:20px;width: 100px clickfromJsonjson数据添加/buttonbutton styleheight: 40px;margin-left:20px;width: 100px clicktoJsonjson数据获取/buttondiv classtextarea-container styleheight: 400px{{ sheetJsonStr }}/div/div/div
/templatescriptimport 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);},},
}
/scriptstyle.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
