摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

前言 | 问题背景

作为一名优良的打工人，Excel是大家下班中必不可少的办公软件。随着互联网时代的到来，越来越多的公司开始应用各种B/S零碎来解决表格数据文件。那么有没有一种能够间接在浏览器中应用的Excel插件去解决数据呢？答案是必定的。本文小编将为大家介绍如何在Vue框架中集成在线表格插件（以下简称为“SpreadJS”）和在线表格编辑器（类Excel浏览器插件）实现在浏览器中应用Excel插件来解决数据。

在本教程中，咱们将应用node.js，请确保已装置最新版本，除此之外还须要应用软件Visual Studio Code(以下简称“VSCode”)作为编程环境，请您以管理员身份运行它。

上一篇文章(《新人必看！手把手教你如何应用浏览器表格插件（上）》)小编为大家介绍了如何在Vue框架中集成表格插件（SpreadJS），本篇小编将持续为大家介绍如何在Vue中集成在线表格编辑器。

如何在Vue框架中集成在线表格编辑器（designer）

在Vue中集成在线表格编辑器：

本节内容小编将为大家介绍Vue框架中如何集成在线表格编辑器和如何实现应用编辑器实现表格数据绑定。

Vue集成在线表格编辑器和SpreadJS的办法类似，首先引入须要集成到Vue中的资源，其次应用styleInfo标签和designerInitialized设置表格的大小（应用办法与Vue集成SpreadJS一样，具体能够参考第一篇文章）。

import {defineComponent} from "Vue"// SpreadJS外围资源import GC from "@grapecity/spread-sheets"// 形态资源import "@grapecity/spread-sheets-shapes"// 二维码资源import "@grapecity/spread-sheets-barcode"// 图表资源import "@grapecity/spread-sheets-charts"// 文件IO相干资源import "@grapecity/spread-excelio"// 打印资源 打印资源要在pdf之前import "@grapecity/spread-sheets-print"// 导出pdf相干资源import "@grapecity/spread-sheets-pdf"// 透视表相干资源import "@grapecity/spread-sheets-pivot-addon"// 集算表相干资源import "@grapecity/spread-sheets-tablesheet"// 组件运行时款式信息import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"// 组件运行时语言资源import "@grapecity/spread-sheets-resources-zh"// 设计器资源，设计器资源要在设计器外围资源之前import "@grapecity/spread-sheets-designer-resources-cn"// 设计器外围资源import \* as GcDesigner from "@grapecity/spread-sheets-designer"// 设计器cssimport "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"// 设计器对Vue的反对资源import Designer from "@grapecity/spread-sheets-designer-Vue"import {bindFile} from "../files/bindFile"import {bindSchema,generateData} from "../files/bindTree.js"

（Vue引入在线表格编辑器的资源）

实现数据绑定：

为了更形象、具体的形容数据绑定，小编将用一个简略的小案例为大家介绍在SpreadJS中数据绑定是如何实现的。

实现需求：通过SpreadJS实现一个简略的苹果销售量的数据表格。数据表格中的数据能够通过数据文件实现将数据回显到数据表格中。上面是具体实现的办法步骤：

（1）设计可视化表格：

应用spreaeJs表格设计器拉拽设计出一个表格如下图所示(和Excel创建表格的办法一样，不具体介绍)。

（初始化一个Excel表格）

除了SpreadJS可视化办法创建表格之外，小编再为大家再介绍一种应用数据文件实现表格的办法：

在提供的源码资源中蕴含了两个数据文件bindFile.js和bindTree.js，而bindFile.js文件则是上图表格的Json文件格式，应用spread.fromJSON(bindFile)办法能够读取bindFile.js文件中的内容并显示到页面上。

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {// 加载文件（第一步）spread.fromJSON(bindFile)}

（读取bindFile.js文件的代码）

（2）创立工作表：

设计完可视化表格之后就是创立数据表来存储数据，创立工作表也能够分为可视化创立工作表数据文件实现工作表，因为可视化设计工作表操作比较简单，小编在这里不作具体介绍。上面次要介绍如何通过代码实现数据表：应用designer的setData办法读取bindTree.js文件中的bindSchema（数据表的Json格局）并加载到SpreadJS的页面中。

//第二步绑定数据绑定表信息（designer初始化实现之后，加载右侧Tree）

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

（实现创立工作表的代码）

（3）实现数据绑定：

设计完工作表之后，上面将介绍如何通过代码和数据文件实现数据绑定：

首先去调用bindTree.js文件中的generateData办法生成随机数据，而后应用

GC.Spread.Sheets.Bindings.CellBindingSource办法去生成绑定的数据源，再将绑定的数据源放到初始化的流动页sheet中，最初去加载数据。具体实现代码如下：

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {// 加载文件（第一步）spread.fromJSON(bindFile)//第三步绑定数据// mock数据let data = generateData(20)// 生成绑定数据源let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)// 获取以后流动sheetlet sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet// 获取sheet中的指标表格，并将表格的数据设置为随数据量主动纵向扩大let table = sheet.tables.findByName('report_card')table.expandBoundRows(true)// 加载数据sheet.setDataSource(source)}

（实现数据绑定的代码）

将下面的步骤代码合在一起之后的整体代码如下所示：

/

/绑定数据信息（第二步）const initDesigner = (designerEntity:GcDesigner.Spread.Sheets.Designer.Designer) =\> {designer = designerEntitycustomeConfig(designer)//第二步绑定数据绑定表信息（designer初始化实现之后，加载右侧Tree）designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))designer.setData('updatedTreeNode',JSON.stringify(bindSchema))let spread = designer.getWorkbook() as GC.Spread.Sheets.WorkbookloadBindData(spread)}const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {// 加载文件（第一步）spread.fromJSON(bindFile)//第三步绑定数据// mock数据let data = generateData(20)// 生成绑定数据源let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)// 获取以后流动sheetlet sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet// 获取sheet中的指标表格，并将表格的数据设置为随数据量主动纵向扩大let table = sheet.tables.findByName('report_card')table.expandBoundRows(true)// 加载数据sheet.setDataSource(source)}return{styleInfo,initDesigner}

（整体流程的代码）

（最终效果图）

做完这些之后便能够在浏览器中体验和应用在线编辑器了（高度相似Excel操作）。

备注：

整顿的残缺源码附文章下方day2文件夹中的vue3-spreadJS-ts文件，间接在终端中应用npm run dev指令运行即可。

源码链接：https://pan.baidu.com/s/1ddz8UCuDeVZEIvXiff70xw 明码：dnpx

总结

这两篇文章为大家具体的介绍了SpreadJS在Vue框架中应用的办法和具体的作用，心愿能够帮忙大家在学习SpreadJS的路线上能够起到帮忙。

更多参考资料：

本文对应的视频教程

表格控件技术材料文档

\>\>\>\>扩大材料：

在线Excel表格文档版本治理的设计和实现 - 葡萄城技术博客 (grapecity.com.cn)

进步工作效率的神器：基于 SpreadJS 实现Chrome Excel扩大插件 - 葡萄城技术博客 (grapecity.com.cn)

类Excel表格控件SpreadJS利用场景 —— 企业所得税申报零碎的剖析与解决方案 - 葡萄城技术博客 (grapecity.com.cn)