摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言 | 问题背景
作为一名优良的打工人，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"
// 设计器css
import "@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)
// 获取以后流动sheet
let 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 = designerEntity
customeConfig(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.Workbook
loadBindData(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)
// 获取以后流动sheet
let 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)
发表回复