您现在的位置是：首页 > 文章详情

SpreadJS V18.0 Update2 重磅发布：实时协作、视觉定制与效率升级

日期：2025-09-11点击：2收藏

作为葡萄城旗下备受青睐的 JavaScript 电子表格控件，SpreadJS 始终以"类 Excel 体验、低代码开发、企业级性能"为核心，赋能开发者快速构建贴合业务场景的表格应用。

近日，SpreadJS 迎来 V18.2 版本更新，聚焦实时协作、视觉定制、操作效率三大维度，推出 beta 版协同插件、多主题设计器、LAMBDA 数据转换等十余项核心特性，同时全面适配现代前端框架。本文将带您深度拆解这些新功能，看看它们如何解决团队协作、界面定制与开发效率的痛点。

一、实时协作新纪元：协同插件（Beta）正式登场

在多人协作场景中，"版本混乱、同步延迟、冲突难解决"是长期困扰团队的难题。

SpreadJS V18.2 引入协同插件 （SpreadJS Sheets Collaboration Add-on），基于自研协作框架打造，为电子表格带来媲美 Office Excel for Web 的实时编辑体验，目前处于 beta 阶段，将根据用户反馈持续优化。

1. 模块化架构：灵活扩展，适配多场景

协同插件的核心是"协同框架 + 表格协同插件"的双层架构，兼顾通用性与表格场景的专业性：

底层：协同框架（Collaboration Framework）
支持表格、富文本、代码编辑器等多文档类型协作，包含三大核心模块：
js-collaboration：处理实时双向数据交换与消息广播，确保用户操作即时同步
js-collaboration-ot：基于操作转换（OT） 算法解决并发冲突，集成数据库适配器，避免多用户编辑同一单元格时的数据混乱
js-collaboration-presence：提供用户存在感感知，实时显示活跃用户的光标、选区，让协作状态可视化

上层：表格协同插件（Sheets Collaboration Add-on）
针对表格场景优化，提供即插即用的能力，包含两个核心包：
spread-sheets-collaboration：定义表格专属 OT 类型，处理单元格编辑、行列增减等场景的冲突转换
spread-sheets-collaboration-addon：将本地修改转换为"操作集（Ops）"并分组为"变更集（ChangeSet）"，通过服务器同步至所有客户端

2. 核心能力：覆盖协作全流程需求

协同插件从"编辑、感知、权限、追溯"四个维度，构建完整的协作体验：

（1）实时编辑与冲突自动处理

多用户可同时编辑同一工作簿，系统通过 OT 算法自动合并操作。例如：当用户 A 修改 B2 单元格为"100"，用户 B 同时修改 B2 为"200"时，插件会根据操作顺序智能合并，避免数据覆盖，且双方视图实时更新。

（2）用户存在感可视化

通过不同颜色的光标和选区，清晰标记当前活跃用户，结合"正在编辑"的状态提示，让团队成员明确他人操作焦点，减少无效沟通。

（3）精细化权限管控

支持"查看模式"与"编辑模式"切换：

查看模式：只读权限，允许本地排序、调整列宽等 UI 交互，但修改不会同步
编辑模式：完整编辑权限，操作实时同步至所有用户

（4）协同撤销/重做与 ChangeSet 管理

撤销栈以 Ops 形式存储，仅影响用户自身操作，不干扰他人；
ChangeSet（变更集）作为逻辑修改单元，支持原子性应用、冲突解决与历史追溯，结合 API 可实现操作溯源与版本回滚（如 applyChangeSet 应用变更、onChangeSet 监听变更）。

3. 应用价值：从团队效率到企业合规

提升协作效率：分布式团队可实时共同编辑项目计划、财务报表，消除"邮件传文件、版本号混乱"的问题，任务完成周期缩短 30%+；
适配企业场景：支持多人评审、审计追溯（符合金融、政务等行业合规要求），权限管控确保敏感数据安全；
降低开发成本：开发者无需从零构建协同逻辑，通过插件 API 快速集成，专注业务场景而非底层同步机制。

注意：当前 beta 版本暂不支持绑定功能、数据管理器（数据图表/甘特表等）及浮动对象，正式版将逐步完善

二、视觉与定制升级：设计器主题更灵活

为适配不同使用场景与品牌风格，SpreadJS V18.2 对设计器主题进行全面增强，提供"预设+自定义"双体系，满足从基础使用到深度品牌化的需求。

1. 三大预设主题：覆盖主流使用场景

设计器内置 3 种主题，可根据环境与用户习惯快速切换：

主题类型	核心特点	适用场景
Light（默认）	高对比度、清晰易读，现代简约风格	日常办公、明亮环境下的长时间编辑
Dark	深色基调，减少屏幕蓝光刺激	低光环境、夜间办公，降低视觉疲劳
Classic	传统电子表格视觉风格	习惯旧版 Excel 界面的用户，降低学习成本

2. 三种自定义方法：精准匹配品牌形象

基于 Light/Dark 主题扩展，支持通过 API、CSS、JavaScript 调整视觉属性（背景色、圆角、阴影等），实现"表格界面与产品品牌一体化"。

（1）API 动态定制（推荐）

通过 setTheme() 方法实时修改主题，未定义属性保持默认，示例代码：

// 自定义主题：浅蓝背景、深灰文本、6px 圆角
GC.Spread.Sheets.Designer.setTheme({
  colorBackground: "#F0F4F8",
  colorForeground: "#2D3436",
  borderRadiusM: "6px",
  shadow8: "rgba(142, 148, 156, 0.1) 0px 2px 4px, rgba(142, 148, 156, 0.06) 0px 1px 2px"
});

// 重置为预设主题
Designer.setTheme(null);

// 获取当前主题配置
let currentTheme = GC.Spread.Sheets.Designer.getTheme();
console.log(currentTheme.colorBackground); // 输出 "#F0F4F8"

（2）CSS 静态覆盖

在全局 CSS 中定义主题变量，适合无需动态切换的场景：

:root {
  --sjs-color-background: #F0F4F8;
  --sjs-color-foreground: #2D3436;
  --sjs-border-radius-m: 6px;
  --js-shadow-8: rgba(142, 148, 156, 0.1) 0px 2px 4px, rgba(142, 148, 156, 0.06) 0px 1px 2px;
}

（3）JavaScript 动态更新

通过操作 DOM 切换主题，支持用户自主选择风格：、

// 动态设置主题属性
document.documentElement.style.setProperty(
  GC.Spread.Sheets.Designer.ThemeTokens.colorBackground, 
  '#F0F4F8'
);
document.documentElement.style.setProperty(
  GC.Spread.Sheets.Designer.ThemeTokens.colorForeground, 
  '#2D3436'
);