SpreadJS 纯前端表格控件应用案例：MHT-CP 数据填报采集平台

由明厚天股份研发的数据填报采集平台，提供了便于用户操作的类Excel界面模式，可为用户提供规范、正确、完整的数据采集和填报模型，结合数据自动化抽样，可解析不同数据库、不同数据格式的数据，让数据填报流程更简单、更快速、更顺畅。



下面，让我们一起来看看明厚天股份是如何在“MHT-CP数据填报采集平台”中应用表格技术，实现“数据填报”与数据汇总计算的。



项目背景



近几年，随着计算机技术的发展和办公自动化的建设，简化用户数据采集流程，提供标准化的数据呈现和数据汇总平台已成为企业信息化转型的关键。



由明厚天股份研发的数据填报采集平台，提供了便于用户操作的类Excel界面模式，可为用户提供规范、正确、完整的数据采集和填报模型，结合数据自动化抽样，可解析不同数据库、不同数据格式的数据，让数据填报流程更简单、更快速、更顺畅。



除了数据填报，该平台还可按照预制的报表内容进行数据可视化展示，以实现报表模板自动生成与信息多元化利用，通过将 SpreadJS 纯前端表格控件与系统底层架构集成，不仅保留了 Excel 的数据处理能力，还满足了批量导入导出 Excel 文档、大数据量填报、填报暂存、模板下发、多级上报等多项业务需求。



项目架构图





项目截图



1\. 表单设计（样式、填报区域、数据绑定、角色权限等设计）



通过嵌入 SpreadJS 在线表格编辑器，用户可根据具体业务，直接在浏览器中在线填报数据，也可将 Excel 文档作为原始表单模板，导入系统后，进行数据绑定、权限分配等自定义操作，这样不仅保留了 Excel 的数据处理能力，还可将模板数据传输至服务端进行有效的管理和存储。





2\. 数据填报



借助 SpreadJS 统一数据存储模型，实现数据标准化录入，可以大幅简化数据多级上报的设计步骤与开发难度。



平台可依据业务流程和用户的实际填报需求，进行数据采集、查阅及汇总。



（调整模板对应数据源）



（自定制Excel模板）



（在线预览模板文件）



3\. 同业务域的多表单联合填报





4\. 数据单元格透视





5\. 数据审核





六、表格技术带来的价值（选择表格控件 SpreadJS 的主要原因）



针对“表单设计”的应用场景，SpreadJS实现了：



1. 纯前端解析Excel、在线导入导出 Excel、实现过程基本零代码

2. 多种数据格式校验，如自定义校验规则，更为灵活高效

3. 单元格级别的角色权限控制

4. 可通过Sql数据源信息自动生成表单，方便快捷



针对“数据填报”的应用场景，SpreadJS实现了：



1. 绑定数据模版并动态填充数据

2. 单元格级别的权限控制

3. 避免了海量数据引起的性能问题，读写性能高

4. 类Excel界面，符合大部分用户的使用习惯

5. 数据公式自动计算，便于数据填报



使用SpreadJS控件，大大节约了开发时间、人力成本，降低了开发难度，且SpreadJS也更符合普通非技术类人员的操作习惯（类 Excel 模式），易于被用户接受。



明厚天股份之所以选择SpreadJS控件开发数据填报系统，主要考虑以下两方面原因：



1\. 完全兼容Excel文档，具备在线Excel 导入导出能力



无需后台代码和第三方组件，SpreadJS 不仅提供了在线导入、导出 Excel 报表、导出 PDF 的功能，还支持多种匹配逻辑和自定义导入导出操作，如只导入数据或公式、导入固定行和不定行、将冻结行列转置为行头列头、导出自适应行高、密码保护等，可提供更加灵活、自主可控的导入导出方式。



2\. 支持二次扩展，满足客户化开发



SpreadJS 兼容 Angular、React、Vue等前端开发框架，符合 UMD 规范，可按需加载，易于在 VSCode 中使用。通过二次扩展，我司直接将 SpreadJS 作为数据填报模块嵌入到填报平台，实现了批量导入导出 Excel、大数据量填报、填报暂存、多 sheet 填报、多级上报等多项业务需求。



以上就是明厚天股份应用SpreadJS表格控件技术研发的“MHT-CP数据填报采集平台”案例展示，如需查看 SpreadJS 的更多应用案例或需要了解 SpreadJS 的更多功能特性，欢迎访问SpreadJS 产品官网。



关于SpreadJS 纯前端表格控件



SpreadJS 是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户带来亲切、易用的使用体验，并满足 Web Excel 组件开发、表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景，可极大降低企业研发成本和项目交付风险。