[墙裂推荐] 纯前端表格控件 -SpreadJS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2061 天前的主题，其中的信息可能已经有所发展或是发生改变。

SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，同时满足 .NET 、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。

与此同时，SpreadJS 桌面设计器的在线版本 SpreadJS 在线表格编辑器已正式推出，这是一款在功能、外观和操作上都与 Excel 高度类似的在线表格编辑程序，更开放的 API 和更简单的拖拽操作方式，帮助用户更高效进行表单设计和填报，从而助力企业轻松处理海量表格数据。

SpreadJS 核心功能

实现无代码开发的类 Excel 的表格应用程序

SpreadJS 内置桌面端和 Web 端的在线表格编辑器，支持用户填报模块，可即时创建类似 Excel 的电子表格应用。通过 SpreadJS 提供的类似 Excel 模板设计器，用户还可轻松设计模板，节约应用程序开发所需的时间和精力。无代码开发式平台，各行业人员均可通过 Excel 软件制作表格，然后轻松导入 SpreadJS 中，提升模板复用性。
具备高效的计算引擎，百万行数据毫秒级处理

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

SpreadJS 基于 HTML5 规范，无需引用 JQuery 库和其他框架，即可实现轻量级纯前端表格控件。无平台限制，.NET 平台可以使用，Java 平台也可以使用；无服务器要求，Windows 服务器能用，Linux 服务器同样可以使用。
模块化设计，符合 UMD 规范

SpreadJS 基于模块化设计，符合 UMD 规范（即通用模块规范），用户只需将所使用的功能模块引入项目中即可。

关于 UMD 规范，这里是个小彩蛋：

Javascript 的组件生态在最近几年的发展愈发给力，我们的可选性更加广泛了。这本是一件好事，但是当多个第三方 Javascript 在一起混合使用的时候，我们可能会遇到一个问题，那就是并非所有组件都能在一起很愉快的玩耍。为了解决这个问题，人们通过一种统一的模式来构造 JavaScript 代码，UMD 规范由此而生。应用 UMD 规范的 JS 文件好比一个立即执行函数。这个函数有两个参数，第一个参数是当前运行时环境，第二个参数是模块的定义体。在执行 UMD 规范时，会优先判断当前环境是否支持 AMD 环境，然后再检验是否支持 CommonJS 环境，否则认为当前环境为浏览器环境（ window ）。当然具体的判断顺序可以调换。
```
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            // Node, CommonJS-like
            module.exports = factory(require('jquery'));
        } else {
            // Browser globals (root is window)
            root.returnExports = factory(root.jQuery);
        }
    }(this, function ($) {
        //    methods
        function myFunc(){};

        //    exposed public method
        return myFunc;
    }));
```
内置形状（ Shape ）以及自定义形状支持

SpreadJS 已经实现了诸多类 Excel 的内置形状，如线条、矩形、箭头、流程图，可以为您的前端界面添加更多的细节展现和可视化效果，并且这些内置的形状都可以无缝的进行导入和导出。

SpreadJS 适用场景

SpreadJS 可满足所有前端表格数据处理的需要以及类 Excel 的表格应用程序开发，产品自面世以来，已经在能源、金融、物流、大数据、信息技术等行业引起广泛关注，备受华为、腾讯、泛微、滴滴出行、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

下面，笔者会从 Excel 应用、表格数据处理、表单填报、数据可视化和在线文档五个部分，深入阐述 SpreadJS 具体适用场景：

EXCEL 应用场景

最终用户具备大量的 Excel 软件使用技能和习惯，大多数用户以 Excel 作为主要工作工具的场景，SpreadJS 能提供与 Excel 几乎一致的交互体验和前端功能；

最终用户存在大量的 Excel 文件，需要导入、编辑（保持原样）操作，通过 SpreadJS 可以在前端完成导入导出、并保持文件最大的兼容性；

最终用户使用中的系统，需要将 Excel 文件作为数据导出，比如 OA、账务、生产系统等，通过 SpreadJS 即可轻松的将数据导出为指定模板的 Excel 文件，进行复用。
Grid 表格数据处理场景

当用户希望以表格的形式展示数据时，比如自动排序、筛选、行表头、列表头、汇总、边框和单元格样式；需要给最终用户提供基本数据展示，如分组、查找、聚合、公式等操作时，SpreadJS 均可满足。
Form 表单填报场景

用户希望以表单的形式进行数据填报，如申请表，或者文档类的报告生成及打印导出，如检测报告时，通过 SpreadJS 内置的多种单元格类型，如按钮、单复选、下拉列表、单元格内的公式引用、数据验证等均能有效的完成表单相关功能。
数据可视化场景

SpreadJS 可满足将数据以图表、迷你图(Sparkline)、形状(Shape)、条件格式图形化显示，成为数据分析、Dashboard、OLAP、BI 等典型场景。
在线文档需求场景

SpreadJS 已将类 Excel 的界面嵌入应用中，使最终用户有能力直接通过浏览器完成文档操作，例如SpreadJS 在线表格编辑器。