SpreadJS 是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，可为企业信息化建设提供表格文档协同编辑、 数据填报和类Excel报表设计的功能支持。

SpreadJS 的组件功能十分丰富，为了更好的上手使用，本文汇集了SpreadJS 的常见技术问题和相关示例代码，不管你是提埋点需求的业务方还是负责代码埋点的开发人员，通过阅读本文，都可尝试搭建出您的第一个在线表格系统。

一、如何获取SpreadJS实例

获取SpreadJS的实例有两种方式：

1、借助在线表格编辑器：作为SpreadJS的主要功能之一，在线表格编辑器可直接在 Angular、 React、 Vue 等前端框架中调用，内置开放的 API 和类 Excel 的 UI 设计元素（如工具面板），可实现高效的模板设计、在线编辑和数据绑定，为最终用户带来高度类似 Excel 的使用体验。

当使用在线表格编辑器时，获取SpreadJS实例的API为：

2、直接借助SpreadJS的容器，获取SpreadJS实例的API为：

二、如何操作表单

表单（WorkSheet）是用于呈现数据和处理数据的载体。SpreadJS提供了相对灵活的表单操作接口，即可以添加一个或多个表单，又可以直接绑定数据源。

三、如何添加数据

给表单添加数据时，SpreadJS提供了两种方式，分别是数据绑定方式和非绑定方式。使用非绑定方式时，设置数据的API有：

针对数据绑定方式，SpreadJS提供三种形式的数据绑定方式，分别是表单级别绑定、单元格级别绑定和表格级别绑定，不论哪种数据绑定的方式，其设置数据调用的API均为：

举例，以表单级别的数据绑定为例，其设置方式如下：

四、如何获取数据

在 SpreadJS中，添加数据有两种方式，相对应的获取数据也有两种方式，分别是绑定模式下的数据获取和非绑定模式下的数据获取。

非数据绑定模式下数据获取示例如下：

数据绑定模式下的数据获取示例如下：

五、如何设计模板

用户可以使用SpreadJS在线表格编辑器或者API来实现填报模板的设计工作。由于业务人员比开发人员更了解报表结构，为了提高工作效率，在实际项目中，报表设计流程会由开发人员完成，而模板设计则会交由业务人员。

六、后端如何保存、发送数据

GrapeCity Documents for Excel （简称：GcExcel）是一款基于 Java 平台的服务端高性能表格组件，这款组件可以与SpreadJS 无缝端兼容，再不需要依赖 Office、POI 或第三方应用软件的情况下，实现批量创建、加载、编辑、打印、导入/导出 Excel 文档。

很多用户如果同时在了解SpreadJS和GcExcel时，往往会认为GcExcel会提供将前端表格数据存储到数据库的功能。这里需要解释一下，所有涉及后端对Excel文件进行的操作，或者在后端对一个文件进行设置值、样式等其他信息等操作的行为，均为GcExcel的组件功能。SpreadJS和GcExcel都不会提供任何关于保存数据至数据库中的服务，具体的保存逻辑需要用户自行定义，前后端数据交互格式由开发人员进行约定。

举例：下图分享了一位用户设计模板并将模板传递到后端，最后保存到数据库中的项目流程图，前端可以调用SpreadJS提供的toJSON()方法导出ssjson传递给后端，后端生成数据表存入数据库以及存储ssjson模板文件都需要研发人自行定义存储逻辑。

目前大部分用户采取的是模板与数据分开保存的模式，即模板可以使用文件，也可以使用ssjson字符串，具体使用哪种方式由开发人员决定。模数分离的好处是在模板加载的同时可以请求数据，且数据最终格式符合SpreadJS的要求。

如果文件中数据量不大，前端也可以将整个工作簿toJSON（）以一个大的JSON字符串的形式发送给后端，后端拿到json字符串之后可以利用GcExcel重新构建文件，构建完成之后依旧可以利用GcExcel的API在后端获取填写的数据。

上图是用数据绑定的方式来加载数据，返回给前端的是一个json数据结构，前端拿到数据后直接调用worksheet的setDatasource()即可。如果采用非绑定方式，SpreadJS会接收一个二维数组，并在拿到数据后调用worksheet的setArray()方法加载数据。

以上就是纯前端表格控件SpreadJS六个常见的基础问题及解答，为了能够更轻松的上手SpreadJS，欢迎访问葡萄城产品帮助中心，配合评估指南、新手入门视频、学习指南和常用资源模块，实现组件在项目中的快速应用。