纯前端表格控件 SpreadJS 以专注业务、提升效率赢得用户与市场

[powertoolsteam]

提起华为 2012 实验室，你可能有点陌生。

但你一定还对前段时间华为的那封《海思总裁致员工的一封信》记忆犹新，就在那篇饱含深情的信中，我们知道了华为为确保公司大部分产品的战略安全和连续供应，打造了无数“备胎”，一夜“转正”从幕后走向前台的海思半导体就是其中之一。而海思半导体就隶属于华为 2012 实验室下属的二级部门，其他二级部门还包括：中央硬件工程学院、研发能力中心、中央软件院等。

曾有戏言说这个实验室是中国黑科技最多的地方，也代表着国内最顶级的科研水平。

而就是这么一个本身科技水平颇高的实验室，在 2018 年选择了纯前端表格控件——葡萄城 SpreadJS作为其部门内部表格数据管理的工具。

Why ?

1、小小的控件大大的能量

一般来说，企业的 IT 部门负责整个企业业务应用程序的开发和部署。而每一个新的应用程序及系统的改动，会收到来自各个部门的各种要求，体量不大的 IT 部门有时候并不能很好很及时的满足这些需求。

最终就会形成，IT 部门难以跟上企业的业务，同时身上积压着超出他们承受范围的工作等恶性循环。而业务部门等不及就开始自己着手解决问题，他们购买未经批准的现成应用程序或者自行制定解决方案。往往也不符合企业的 IT 标准，并且经常在组织间或在无法协同的系统间产生冲突，无形中成为桎梏企业业务的重大问题。

在这种混乱中，一种减少重复工作，提升效率的工具——控件，悄然兴起。

创建控件的最大意义在于封装重复的工作，其次是可以扩充现有控件的功能。

通俗的来说，控件就如同带有魔法的积木一样，只需要拿起来堆堆叠叠，就可以做出一辆小车、几棵植物，建起一座城池。但它又与普通堆积木不同，用积木堆的小汽车，再使用时，还需要重复劳动，而控件则可以随时随地的初始化并可以通过接收参数改变自身属性（颜色，尺寸等）来使用。

这些控件能给项目开发和软件交付带来极大的便利。

而我们这次的故事的主角——SpreadJS，就是一个赋能开发者的纯前端表格控件。SpreadJS 可以帮助开发人员专注于产品的业务逻辑，而不用机械式的通过编码实现数据基本处理，如增删改查等。

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，以“高速低耗、高度类似 Excel、可无限扩展”为产品特色，提供移动跨平台和浏览器支持，同时满足 .NET 、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景，为用户带来亲切的 Excel 使用体验。

2、开发难度大但实际作用深远

设计控件是一项繁重的工作。比如它的特性之一兼容 Excel 就有很大的难度。

兼容 Excel，也可以称之为 Office 文档兼容性。

简单来说就是，如果我们开发别的软件，只要把功能实现就好，不论中间怎么样。比如播放视频的软件只要能播视频就好，听音乐的能听音乐就好。但这个纯前端的取代 Excel 的产品必须能够正确读取 Office Excel 文档。因为 Office Excel 的市场占有率太高，如果不能兼容，意味着别人发来的文档你打不开。想象一下，你以前的文档，你同事、合作伙伴发来的文档，你都打不开。如果他们要看你的文档，得先装对应的软件。这就好像你在微信之外，用另一个全新的聊天工具，你要找朋友聊天，得先让他们安装一个新的聊天工具。

而要实现这样的兼容性，就需要与原有设计(文件格式设计会隐含着原来作者对程序 Model 的设计)兼容，而 Office Excel 文档并不是透明的。为了这个兼容，开发者需要在黑盒模式下各种大胆猜测小心调试，还要承担“只要有问题就是你的问题”的巨大压力。同时，背负上了带着别人的历史追赶别人进步的重任。

而在目前 Excel 已有的 480 多种函数公式中，SpreadJS 已经支持 450 种以上。

具体讲讲几个可以帮助开发人员在自己的系统中实现 Excel 的功能：

贴近 Excel 的应用

其实，上面所讲的 Excel 兼容性就是 SpreadJS 最令笔者惊喜的特性之一。因为很多企业的历史数据等都是留存在 Excel 格式的文件中的，这种能够直接导入和导出 Excel 文件的特点极大的方便了企业对留存数据的存储、整理和应用。

而且，作为控件，企业完全可以用 SpreadJS 完美嵌入到自己的 OA、账务、生产等系统中使用，轻松的将数据导出为指定模板的 Excel 文件，进行复用。在笔者的试用中，不论从页面还是功能都与 Excel 几乎一致，要不是在 Web 端，笔者甚至以为自己在使用 Excel。这将极大的减少企业员工的学习成本，极快上手。

而对于开发人员来说，在帮助企业进行业务应用设计时，通过 SpreadJS 提供的类似 Excel 模板设计器，可以轻松的设计模板，节约应用程序开发所需的时间和精力。仅用不超过 100 行代码，就可以实现 Excel 的全部功能，各行业人员均可通过 Excel 软件制作表格，然后轻松导入 SpreadJS 中，提升模板复用性。

“公司的项目管理系统需要使用 SpreadJS 做一个通用的 Excel 模板设计器，将此前自定制的组件通过 SpreadJS 进行集成，用拖拽的方式在 SpreadJS 的表格编辑器界面进行展示和配置，以便生成一套能够自行设计出数据填报、数据可视化甚至是 BI 的 Excel 模板。”

——天津卡达克数据有限公司

Form 表单填报

填报就是提前设计好表单的样式，在 web 端展示，分发给别人或者嵌入到别的软件网页，来收集数据，方便存入（数据）库，就像注册网站填入你的个人信息，发送到后台，同步到数据库。

SpreadJS 内置桌面端和 Web 端的在线表格编辑器，支持用户填报模块。通过 SpreadJS 内置的多种单元格类型，如按钮、单复选、下拉列表、单元格内的公式引用、数据验证等均能有效的完成表单相关功能。这种提前设计好报表样式收集数据入库，然后导出的方式，能省去很多工作量。

“SpreadJS 表单控件主要应用于本项目中各类工资表格的展示、编辑和查询，最后用于汇总生成各类报表并进行展示。我们的体会是，使用 SpreadJS 我们可以轻松设计模板，节约应用程序开发所需的时间和精力。无需编码，财务、人事管理人员均可通过 Excel 软件设计界面，设计计算公式，然后轻松导入设计器或 SpreadJS 中，就可实现模板重用。这大大减轻了工作强度，使得快速开发得以实现。SpreadJS 加载速度快，对内部管理系统无压力。并且生成报表和网页打印报表这些麻烦事儿，SpreadJS 都很好的解决了!”

——中国民用航空飞行学院

Grid 表格数据处理

相比其他电子表格，SpreadJS 提供更全面的内置公式和自定义函数，可针对大数据和复杂计算进行优化，即可为复杂的公式增加计算能力，又不会过多地占用系统资源。

而且，在进行数据展示时，不论是自动排序、筛选、行表头、列表头、汇总、边框和单元格样式等功能，还是进行分组、查找、聚合、公式等操作，SpreadJS 均可满足。

“SpreadJS 是一个基于 HTML5 技术的纯 JavaScript 控件。不但提供了更高的渲染性能和更流畅的界面操作，此外，SpreadJS 通过一个高效的数据模型来快速操作数据，使得载入和操作超百万行数据变得更为方便且快捷。”

——中国能建安徽电建二公司

数据可视化

在企业进行数据资产管理时，很常见的一个任务就是数据可视化，这样才能获得关于数据的形象化展示。而 SpreadJS 除已完全兼容 Excel 的 92 种图表外，还具备了更全面的商业智能分析（数据透视表）和更易于开发使用的自定义扩展能力，并实现了公式的完全自定义。同时已经实现了诸多类 Excel 的内置形状，如线条、矩形、箭头、流程图，可以为前端界面添加更多的细节展现和可视化效果，并且这些内置的形状都可以无缝的进行导入和导出。而即将在十月份推出的升级版新功能中，也新增了形状（ Shape ）、富文本、二维码以及多个新图表类型。

“通过 SpreadJS‘可嵌入用户操作系统，开发在线 Excel’的产品概念，以及葡萄城纯前端数据处理技术在各领域应用中取得的核心成果，我们的技术专家无一不对葡萄城 SpreadJS 纯前端表格控件新颖的设计理念和可靠的产品性能表示赞叹。”

——北京神舟航天软件技术有限公司

对于代码能力不强的开发者来说，仅通过简单拖拽点击，就可以利用 SpreadJS 方便的实现表格模板设计、数据填报、数据统计、数据管理、数据呈现等功能；而对于代码能力较强的开发者来说，SpreadJS 提供源代码，方便其进行自由定制和任意扩展。

这也是 SpreadJS 获得了众多客户认可的原因。

比如华为 2012 实验室。

3、所以，选择 SpreadJS 是意料之中

华为 2012 实验室是华为技术有限公司的总研究组织，据称，该实验室的名字来自于任正非在观看《 2012 》电影后的畅想，他认为未来信息爆炸会像数字洪水一样，华为要想在未来生存发展就得构造自己的“诺亚方舟”。其研究领域涉及新一代通信、云计算、音频视频分析、数据挖掘和机器学习等，重点面向未来 5-10 年中国工业互联网的发展方向，不仅代表国内最顶级的研究水平，还为全球高新技术发展产生了源源不断的推动力。

说起华为和 SpreadJS 的缘起，也有那么些故事性。

在华为一年一度的内部产品赛上，一位开发小哥用 SpreadJS 做了个应用，竟然获得了很高名次的奖项，它也因此在内部的论坛和采购平台上火了一把。接触并尝试 SpreadJS 的部门在使用一段时间后都开始自发安利这个控件，慢慢越来越多的部门开始使用 SpreadJS。

而 SpreadJS 当然不会让他们失望。

首先，SpreadJS 帮助他们实现了内部表格数据处理。

华为 2012 实验室的实验部门遍布全球各地，已经在欧洲、印度、美国、俄罗斯、加拿大、日本设立 8 个重要的海外研究所。随着新研究所的建立和各个研究所间数据交流的程度越来越密集，建立一整套统一、安全、快捷的数据管理机制显得格外重要。

很多部门此前重度依赖 Excel 作为前期调研、资料收集、交换，方案设计 + 审定的核心工具，积攒大量的 Excel 文件需要进行导入导出并现场打印，而用 SpreadJS 开发出的 Web Excel 模块，可以完美兼容 Excel 文件，并无损导入导出，提升了 Excel 模块的复用性和新老系统的迁移工作，同时借助 SpreadJS 开发的模块与 Excel UI 高度一致，用户无需学习新系统，即可快速上手使用。

因此，SpreadJS 真正无缝兼容 Excel 文档且支持 Excel 格式导入导出的特征，让它很好地帮助华为 2012 实验室进行日常维护管理数据。

其次，SpreadJS 中大量的公式函数和自定义函数功能，满足了他们的项目需求。

SpreadJS 能满足 Excel 公式的完美兼容，兼具强大的数据聚合能力和跨表格引用、自定义函数的能力。

“简单的一百多行代码配合 SpreadJS 的类 Excel 操作习惯，让我们的用户就像使用 Excel 一样使用内部系统，也为我们系统开发完成后的用户迁移工作节约了大量培训时间，SpreadJS 优秀的性能让我们高枕无忧。”华为 2012 实验室的相关负责人坦言。

纯前端表格控件 SpreadJS打破传统代码编写方式，将开发回归简捷高效，快速实现用户需求，解决企业个性化需求与标准化生产的矛盾，让企业更专注于发展和创新，势必将成为未来企业数字化进程中的重要开发工具之一。

[netherlanddennis]

PPT 有点多~~

[DreamSpace]

下次试一试

[powertoolsteam]

@netherlanddennis @DreamSpace 这里使用 SpreadJS 开发的一个在线 Demo，看看是不是区分不出 Excel 和它了？ https://demo.grapecity.com.cn/spreadjs/excel-online/content/index.html

[vinsa]

价格挺贵的，Demo 挺炫酷的。

Demo bug： 行 5，选定单元格 F5:M5，右键选删除 -> 程序挂。

[powertoolsteam]

@vinsa V2 大神多，马上修复

[sujin190]

8 千个人授权，真个人买不起。。

[powertoolsteam]

@sujin190 个人接项目开始买得起的 看你要做出什么东西了 当然开源的也有，比如 handsontable

[wbrobot]

Excel 是人家微软的注册商标吧? 你们直接叫在线 Excel?
为啥抄个在线表格就卖几万块, 跟谷歌表单有什么区别??

[hqdmy]

我还以为免费的.

[powertoolsteam]

@wbrobot 你可能不知道，葡萄城跟微软自 2001 年起就是金牌合作伙伴关系，Excel 作为最受欢迎的数据处理软件的确注册了商标。但我们是用 JavaScript 独立实现的高度类似 Excel 的开发工具，其最大价值不在于跟 Excel 有多相似，而是可以嵌入您开发的项目，实现 Excel 的全部功能。你试过就知道他跟谷歌表单有什么区别。

[wangxiaoaer]

@wbrobot 兄弟，不说商标问题，你觉得在线表格很容易做？？？

[FFSephiroth]

NB 反手一个赞

[berumotto]

@wangxiaoaer

v2 有个大佬也做了一个表格 https://github.com/myliang/x-spreadsheet

[wangxiaoaer]

@berumotto 你自己也说了是大佬，那么这种产品如果是自己开发而不是套壳的话，卖几万块钱过分吗？

我怎么就觉得有些人就是见不得别人挣钱。

[rogwan]

葡萄城公司成立于 1980 年，干了快 30 年？

[Mac]

贵，贵，贵，贵

[berumotto]

@wangxiaoaer

自己开发卖多少都不过分~
毕竟人多了什么人都会有~

[TangMonk]

牛逼

[lsvih]

哇，这产品做得好

[powertoolsteam]

@rogwan 对啊 准确说到今年 31 年了

[powertoolsteam]

@TangMonk 谢谢

[rogwan]

@powertoolsteam 厉害啦，那个时候地球上还没有我

[BruceLi]

支持一下前前东家 加油

[snw]

@wbrobot
功能多少是有区别的，做好做差也是有区别的。

举个例子，我以前想找个 JS 的免费 Grid 控件做一个个人兴趣项目，要求：
(1)支持几万行数据(不分页)顺滑滚动，
(2)多列可勾选项目的筛选框(或可自定义)，
然后就发现(1)就能筛掉一大批选项，支持(2)免费的没几个，而且不那么美好，比如 slickGrid 是最快的但很多东西要自己写，最后选择的 w2ui 满足需求但有些 bug。
然后看了眼收费控件的 Demo，ag-Grid，KendoUI 和 FlexGrid 真的是新世界一样，就是价格直接劝退(大几百刀起)。
注：FlexGrid 也是葡萄城的。

[snw]

@snw
补充一句，Grid 功能只是 Spreadsheet 功能的一个子集而已，即使这样都已经足以支撑 ag-Grid 一家小公司了，可想而知 Spreadsheet 的开发工作量。

[powertoolsteam]

@vinsa 您好 最新的 DEMO 已经修改这个 BUG 了，请知悉：
https://demo.grapecity.com.cn/SpreadJS/WebDesigner/content/index.html