背景

在公司的日常业务中，存在不少数据的收集提取需要，大部分公司会采取Excel来实现数据的收集和汇总，但这项工作会让负责信息收集的业务人员相当头大。尽管提前做好了数据收集模板，但最终提交上来的模板会被批改的形形色色，信息填写错误率比拟高，无奈实现信息填写不残缺不容许提交的束缚。前期的数据汇总尽管能够采纳手动的复制黏贴来实现，但如果想要把这些数据做结构化存储，又须要去研发人员去开发一套解析Excel文档的性能，将这些填报数据提取入库，整个流程比拟繁琐且出错率较高。

如果从最开始将这套数据收集的业务齐全做在Web端，整体的数据收集工作下发，填报，数据汇总，数据提取齐全自动化，这将会大大的进步业务人员的工作效率。本文会带大家应用纯前端表格控件解决这个问题。该控件SpreadJS具备纯前端、高性能等特点，在浏览器端实现了excel的大部分性能，使得在线编辑Excel称为可能。应用它，咱们不再须要本地装置Office相干的服务，只有具备一个满足H5规范的浏览器，即可在Web端实现之前须要在本地Excel中实现的一系列操作，咱们也能够在官网部署的体验地址上对SpreadJS进行在线体验。

数据收集逻辑

联合[SpreadJS]()和前后端交互逻辑，即可实现一个数据收集的性能，大家如果对源码内容感兴趣能够查看： 指标补录Demo

在该实例中，应用SpreadJS中的数据绑定设计了数据收集模板与汇总模板；之后开发了数据收据模板下发的性能，将数据收集模板推送给须要填报的相干人员。

对应人员填报后，能够应用SpreadJS中数据绑定获取数据的相干API，获取填写数据。

最终再借助数据绑定，将汇总数据应用数据绑定设置在汇总模板中。通过如上几步，客户的填报数据在提交时，就能够以结构化数据存储在数据库中，汇总时只须要从数据库中查问再设置到汇总模板即可。SpreadJS同时内置了多种数据验证，在数据提交时，联合数据验证，能够在模板中蕴含异样数据时将申请驳回，建设一套谨严便捷的数据提交汇总流程。

我的项目实战

接下来咱们能够一起摸索SpreadJS中数据绑定的性能到底该如何应用。

如果不理解如何在Web端我的项目集成SpreadJS,能够参考文章:

构建基于React18的电子表格程序；

基于Vite+React构建在线Excel；

SpreadJS外部反对了三种数据绑定形式，别离数工作表绑定、单元格绑定与表格绑定。

（1）工作表绑定

通常一个Excel文件会蕴含多张工作表，如下所示，Sheet2与Sheet3别离代表的就是一张工作表：

工作表级别的数据绑定行将数据与当前工作表建设映射关系，相干的代码实现能够参考学习指南-工作表绑定，这里列出一些外围的代码：

let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")// 获取designer关联的Spread对象let spread = designer.getWorkbook()// 获取以后流动的sheetlet sheet = spread.getActiveSheet()// 模仿绑定数据，表单绑定数据源是一个json数组function generateData(count){`    `let data = []`    `for(let i=0; i<count;i++){`        `let item = {}`        `item.id = i`        `item.name = `姓名${i}``        `item.age = Math.ceil(Math.random()\*10+10)`        `item.weight = Math.round(Math.random()\*30+20)`        `data.push(item)`    `}`    `return data}let data = generateData(100)// 设置当前工作表的数据源sheet.setDataSource(data)

执行实现绑定逻辑之后，工作表展现如下：

接下来咱们能够在工作表中进行一些删除行，新增行，批改数据的操作，操作实现之后，调用获取绑定数据的API，即可获取以后批改之后的绑定数据：

具体的demo演示，能够点击这里参考实现。

（2）单元格绑定

单元格绑定见名思意，行将单元格与某一个字段key建设映射，用户填写的数据能够反馈在这个key值对用的value中，单元格绑定代码的实现形式能够参考学习指南-单元格绑定，本文演示如何借助设计器实现数据绑定。首先，借助设计器，实现一个数据绑定模板的设计，能够参考如下动画：

通过简略的拖动，即可实现key值与单元格之间的映射建设，接下来，就能够结构一些默认数据，设置默认的绑定数据。绑定实现之后，能够批改绑定数据，批改实现之后，通过SpreadJS数据绑定获取数据源的API，即可拿到批改之后的数值。这里其实就是一个填报场景的体现，例如，以后须要收集人员信息表，每一位员工在填写实现之后，点击提交时，就能够拿到员工信息的一个json数据，之后前端就能够将这些数据发送给服务端，让服务端去做存储了。

SpreadJS中，反对将以后文件导出成一个他们本人能辨认的json，模板文件能够以json模式存储，下次访问文件时，只须要执行spread.fromJSON(fileJson)，就能够实现模板文件的保留与加在显示了，对于表单绑定残缺的Demo演示能够点击这里，参考具体的实现代码。

（3）表格绑定

很多不相熟Excel的用户，会间接把一个Excel工作簿或者一个工作表称为一个表格，但其实这样的是不正确的。Excel中表格具备非凡的含意，这一点在SpreadJS中也是统一的。SpreadJS中表格绑定的代码实现能够参考学习指南-表格绑定。在客户的理论业务中，表格绑定和单元格绑定往往会同时产生，接下来会演示借助SpreadJS在线表格编辑器（设计器）如何实现一个这样的模板设计：

到这里咱们就为大家残缺展现了如何在填报场景中应用数据绑定获取数据源，大家想理解更多demo源码实例：

https://www.grapecity.com.cn/...