SpreadJS 纯前端表格控件 - V18.0 Update1 新特性

表格设计器

依赖库文件体积优化

新版本对 Designer Component 插件进行了深度优化，成功将其 JS 和 CSS 文件体积缩减 30% 以上。通过对设计器组件代码库的全面重构与性能调优，实现了网页应用加载速度的显著提升与整体性能优化。这些优化让开发者在使用过程中能感受到更轻量、更流畅的开发体验。

版本	designer.all.min.js	designer.min.css
17.0.10	7955 KB	6285 KB
18.0.7	8034 KB	2697 KB
18.1.0	5783 KB	1819 KB

注：此次体积缩减仅针对设计器组件的运行时依赖库文件，不涉及导出的电子表格文件。

侧面板可左右停靠

新版本设计器的可停靠侧面板通过灵活的布局设计，有效提升了用户操作的便捷性与效率。用户可根据自身使用习惯及工作流程，自由调整面板的停靠位置，在确保设计视口视野通透的同时，实现屏幕空间的合理分配，让常用功能触手可及。不仅如此，多个面板支持拖拽至任意侧边，既能以标签页形式归类组织，也能按堆叠顺序并排展示，为用户打造更贴合实际需求的操作界面。

命令面板

受 VS Code 等开发者工具启发，全新设计器命令面板为中国用户带来高效操作体验：在 Windows 系统中按 Ctrl+P、Mac 系统按 Cmd+P，即可通过简单按键触发操作。

输入时会实时显示筛选后的可用命令列表，覆盖格式设置、数据处理、布局工具及导航快捷键等功能。其具备上下文感知、键盘驱动与可搜索特性，助力高级用户实现纯键盘操作，无需鼠标即可调用深度功能。同时，支持根据设计器配置自定义显示命令，灵活适配嵌入式解决方案的多样化需求。

 

工作簿与工作表

工作表背景图像

SpreadJS V18.1 新版本支持为单个工作表设置背景图片。

通过代码设置：

let workbook = new GC.Spread.Sheets.Workbook('ss');
let worksheet = workbook.getActiveSheet();
// 加载 URL 图像
sheet.backgroundImage('https://cdn.grapecity.com.cn/online/resources/spJS_logo2.png');

通过表格设计器：

设置后效果：

注意：之前版本中，表格设计器的“背景”会为整个工作簿（Workbook）设置背景，从新版本开始，该功能默认为当前工作表（Worksheet）设置背景，如需在新版本中保持原有的行为，可使用下面的代码恢复到之前版本的行为：

var config = GC.Spread.Sheets.Designer.DefaultConfig;
var pageLayout = config.ribbon.filter((item) => {
    return item.id === 'pageLayout'
})[0];

var pageSetup = pageLayout.buttonGroups.filter((item) => {
    return item.thumbnailClass === 'ribbon-thumbnail-page-setup'
})[0]

var pageSetupCmdGroup = pageSetup.commandGroup.children[0].children;
pageSetup.commandGroup.children[0].children = pageSetupCmdGroup.map(function(ele) {
    if (ele === 'worksheetBackground') {
        return GC.Spread.Sheets.Designer.CommandNames.Background;
    } else if (ele === 'deleteWorksheetBackground') {
        return GC.Spread.Sheets.Designer.CommandNames.DeleteBackground;
    }
    return ele;
});
designer.setConfig(config);

工作表选项卡设置圆角效果

新版本新增 CSS 允许您可以配置工作表选项卡的外观，已适配新版本 Excel 的外观样式，不同位置的工作表分别提供了对应的 CSS 类。

.sjs-tab-strip-bottom-tab{
  border-radius: value; /* 圆角半径值 */
}
.sjs-tab-strip-left-tab{
  border-radius: value; /* 圆角半径值 */
}
.sjs-tab-strip-right-tab{
  border-radius: value; /* 圆角半径值 */
}
.sjs-tab-strip-top-tab{
  border-radius: value; /* 圆角半径值 */
}

支持基于区域文化的东亚字体

在新版本的主题中，新增对东亚文字的支持。

同时提供，基于文化区域的对应东亚字体，如果要启用该功能，需要使用以下 API

class GC.Spread.Common.CultureInfo {
    fontScriptCode?: string;
}

示例代码：

// 为中文（简体）启用
var cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo('zh-cn');
cultureInfo.fontScriptCode = "Hans";
GC.Spread.Common.CultureManager.culture('zh-cn');

字体的优先级为：

• 主题中指定了东亚字体
• 与区域文化的字体脚本代码匹配的字体
• 默认的拉丁字体

 

计算引擎：公式与函数

TRIMRANGE 函数

新增函数 TRIMRANGE，允许您从数据范围的边缘移除空行和空列，这对于动态数组尤其有用。可选参数允许修剪前导、尾随或两侧。

=TRIMRANGE(range,[trim_rows],[trim_cols])

正则表达式函数

三项新函数可直接在单元格中提供与 Excel 兼容的正则表达式功能：

• REGEXTEST(text, pattern) – 验证字符串模式
• REGEXEXTRACT(text, pattern) – 提取子字符串匹配项
• REGEXREPLACE(text, pattern, replacement) – 清理或重新格式化字符串

evaluateFormula 方法增强

SpreadJS V18.1 新版本增强了 evaluateFormula API ，新增参数 preserveArrayResult。

当你需要保留数组公式的多个输出时，使用 preserveArrayResult: true 来获取完整的数组。

• preserveArrayResult（布尔值，可选）——如果为 true，则返回数组结果；否则，返回单个值。

 

透视表插件

性能提升

内部基准测试显示，数据透视表的渲染和交互速度提升了 60% ，内存占用减少了 50% 以上，显著提升了大型数据集的运行流畅度。

#以下测试数据为 20 万行 x 13 列的 Excel 文件

字段格式增强

当你在 SpreadJS 设计器中操作数据透视表面板，并点击数字格式或标签格式按钮时，会弹出一个设置更为丰富的设计器数字格式对话框。

 

图表 + 数据图表

气泡图气泡比例

新版本可以缩放气泡图中的气泡大小，从而为广泛的数据集提供更好的清晰度。

设置图表轴标签的角度

在过去的版本，您可以通过 API 调整图表的标签角度，现在可以直接在设计器中进行调整。

 

框架支持

支持 Angular 19

SpreadJS v18.1 完全支持 Angular 19，确保与最新的框架更新和 TypeScript 改进兼容。