在线表格编辑器是 SpreadJS 的核心功能之一,可直接在 AngularReactVue 等前端框架中使用,内置开放的 API 和类 Excel 的 UI 设计元素(如工具面板),可实现高效的模板设计、在线编辑和数据绑定,为最终用户带来高度类似 Excel 的使用体验。

SpreadJS在线表格编辑器-工具面板展示

在线表格编辑器的主要功能

在线设计表单
            模板设计

沿用 Excel 的使用习惯,用户无需学习即可轻松设计表单模板。

数据绑定
            数据绑定

单元格级别的数据绑定,可针对某一单元格或在非绑定模式下操作数据。

在线填报表单
            在线填报

在线完成对表单数据的填报、收集、汇总、计算和呈现。

Grid功能 表格功能

提供数据排序、过滤、分组、切片器等常规功能。

数据验证
            数据验证

内置基本数据校验与自定义校验两种方式。

冻结行列 冻结行列

提供冻结行头、列头、行尾、列尾,轻松实现统计行等功能。

公式支持 公式支持

内置 450 多种公式函数,并支持异步函数和自定义公式。

在线设计表单
            导入导出

支持在线导入、导出 Excel(xlsx)文件,以及导出 PDF。

条件格式
            条件格式

支持 18 种条件格式,可简单且快捷的建立多种条件验证。

提供类 Excel 的 UI 设计元素

使用 SpreadJS 在线表格编辑器,仅需简单的拖拽点击,即可在线设计各类 Excel 报表模板,借助其开放的 API,即可开发实现数据填报、在线编辑、数据绑定等功能,为您的最终用户带来高度类似 Excel 的使用体验。

模板设计

模板设计是数据填报的基础,SpreadJS 的在线表格编辑器为业务人员提供了类 Excel 的可视化 UI,无需专门培训,业务人员即可快速创建填报模板。

  • 在线设计模板:用户可以像使用 Excel 一样,在线设计填报模板。
  • 离线设计模板:用户可将 Excel 文件导入到填报系统中,直接使用。
模板设计

数据绑定

SpreadJS 在线表格编辑器提供在线填报和离线填报功能,即支持在创建模板时自定义数据库结构,也可以在没有填报模板,并且没有对应后台数据库的情况下完成填报工作。

  • 现有数据表:可指定填报模板对应的数据表,通过导入的方式加载。
  • 新建数据表:可在线设计后台对应数据库结构,如:对应字段名称、单元格类型和可选值等。
数据绑定

数据填报

SpreadJS 在线表格编辑器提供了开放的 API,可实现类 Excel 的数据展示与数据回填入库的功能,通过二次封装,业务人员可以通过在线填报和离线填报的方式,高效管理业务流程、汇总采集数据。

  • 在线填报:用户可以直接在浏览器中填报数据,就像使用 Excel 一样。
  • 离线填报:用户可以下载填报模板,并将其导入到 Excel 中,在非网络环境下完成数据填报工作,待联网后,再进行数据提交。
数据填报

在线表格编辑器的特性和价值

灵活的应用方式

SpreadJS 在线表格编辑器采用了组件化的设计架构,以 Dom 作为容器,其目标场景定位于可嵌入各类前端页面,并通过扩展插件的形式与 SpreadJS 进行交互。

更易嵌入、移植

SpreadJS 在线表格编辑器不依赖于任何外部类库,有自己的命名空间,以闭包方式,避免 CSS 样式冲突,并可直接在 Angular、Vue、React 等前端 JS 框架中使用。

体积更小,秒级加载

SpreadJS 在线表格编辑器的体积很小,不到 4 MB,且加载速度很快,首次加载仅需 1 ~ 2 秒。

(以上数据均为测试数据,仅供参考)

定制更容易,交互更丰富

SpreadJS 在线表格编辑器采用了声明式语法,代替了 HTML 源代码,二次封装更容易,定制方式更灵活。

常见问题

Q:在线表格编辑器是否有平台限制?

无平台限制,SpreadJS 在线表格编辑器为纯前端架构,不依赖任何外部类库,可直接在 Angular、Vue、React 等前端 JS 框架中使用。

Q:在线表格编辑器是否有服务器限制?

无服务器限制,SpreadJS 在线表格编辑器为纯前端产品,要求浏览器基于 HTML5,对于服务器等没有任何要求。

Q: 在线表格编辑器是否可以下载试用?

可以,在线表格编辑器以前端组件的形式发布,可以下载试用。 点击此处,下载 SpreadJS 在线表格编辑器。

Q: 是否可以在本地(localhost)试运行?

和 SpreadJS 一样,在线表格编辑器可以在本地运行,无任何功能限制,如需消除试用版水印,请致电 400-657-6008。

Q: 一个页面中能否有多个在线表格编辑器实例(多个不同的工具栏)?

可以,在一个页面中,可以实现多个编辑器实例,满足不同权限、模板、场景的需要。

Q: 同一个编辑器实例是否可以关联多个 SpreadJS 实例?

在线表格编辑器以组件形式存在,可以通过 API,简单的切换与多个 SpreadJS 实例的关联。

Q: 在线表格编辑器如何输入授权信息?

GC.Spread.Sheets.Designer.LicenseKey = "你的授权码"

更多 SpreadJS 产品信息

新手入门

帮助零基础的初学者了解和快速入门

产品文档

获取产品相关知识,助您快速上手,轻松编写基于 SpreadJS 的各类应用

预约技术顾问

快速完成产品评估,更有 30 天免费金牌服务