标签 前端表格控件 下的文章

随着企业数字化转型的深入,报表不仅是数据的展示工具,更是业务逻辑的载体。在与众多开发者的交流中,我们发现了一个长期存在的痛点:“为什么我精心设计的报表导出到 Excel 后,动态的公式都变成了死板的数值?”

在即将发布的 SpreadJS V19.0 中,我们针对报表插件(ReportSheet)带来了一项重量级更新——“导出预览报表到 Excel 时保留公式”功能。今天,我就带大家深度解密这项特性,看它如何打破数据与逻辑之间的壁垒。

一、 痛点回顾:消失的“计算逻辑”

在过去,开发者在报表模板中定义的公式,在导出为 Excel 文件时,往往会被计算引擎处理并转化为静态值

这意味着,当终端用户拿到导出的 Excel 文件并试图修改其中的基础数据时,报表中的小计、总计等关键指标并不会随之更新。用户不得不手动重新输入 Excel 公式,这不仅降低了工作效率,也让报表失去了原本的动态交互灵魂。

二、 核心能力:让 Excel 报表“动”起来

SpreadJS V19.0 引入的“保留公式导出(Preserve Formula in Export)”功能,允许用户在将报表导出为 Excel 文件时,完整保留单元格中的计算逻辑

1. 核心价值总结

  • 逻辑无缝延续:导出后的 Excel 依然拥有动态计算能力,而非固定数值。
  • 自由编辑体验:终端用户修改 Excel 单元格内容后,相关公式会自动重算,保持与原始系统一致的交互体验。

在这里插入图片描述

三、 深度解析:它是如何实现的?

为了兼顾各种复杂的报表场景,我们针对不同的公式类型和布局制定了严密的导出策略。

1. 标准 Excel 函数处理

  • 连续区域引用:如果报表展开后的单元格区域是连续的,导出时将作为单一区域引用。
  • 不连续区域引用:对于 SUM、AVERAGE、MIN、MAX 等聚合函数,即使报表生成的区域不连续,SpreadJS 也会智能地将其导出为多个区域的组合引用。
    在这里插入图片描述

在这里插入图片描述

2. R.V(报表变量/视觉)公式的智能转换

R.V 公式是 SpreadJS 报表中的特色功能。在 V19.0 中:

  • 如果公式在预览模式下可解析,导出时会精准转换为 Excel 实际单元格引用
  • 对于表达式中部分可解析的情况,我们会使用 SJS.EMPTY_CELL(值为 0)进行占位,确保公式结构的完整性。
    在这里插入图片描述

在这里插入图片描述

3. 报表专用公式的保留

对于如 R.IndexR.RankR.YoY(同比)等 SpreadJS 专有的报表函数,导出时会保留其函数名和引用。虽然 Excel 原生不支持这些函数(会显示为 #NAME?),但这为二次开发或后续回导提供了珍贵的元数据信息。
在这里插入图片描述

四、 开发者友好:配置只需一个属性

在 SpreadJS V19.0 中,启用这项功能非常简单。

方式一:API 配置

在设置 StaticCell 类型的模板单元格时,只需指定 preserveFormulaInExport 属性:

// 代码示例
export type StaticCell = {
    type: 'Static',
    preserveFormulaInExport?: boolean; // 设为 true 即可开启
    // ... 其他属性
};

方式二:设计器直观操作

如果您使用的是 SpreadJS 设计器,完全无需编写代码。在“报表单元格”属性面板中,勾选“导出 Excel 时保留公式”选项即可一键开启。

在这里插入图片描述

五、 结语

“保留公式导出”特性的加入,标志着 SpreadJS 报表插件在“所见即所得”的基础上,进一步实现了“所获即所用”。它不仅是导出格式的改进,更是对数据生命周期的深度赋能。

SpreadJS V19.0 还有更多关于 AI 插件增强、协同插件正式版、WebWorker 增量计算等重磅特性蓄势待发。

道阻且长,行则将至。 让我们共同期待 V19.0 带来的生产力变革!

注:具体技术文档请以正式发布版本为准。

在数据分析与报表制作场景中,透视表凭借强大的维度聚合能力成为开发者的核心工具。但传统透视表的排序功能往往受限于固定规则,当用户需要根据业务逻辑自定义调整字段项顺序时,操作繁琐、灵活性不足的问题尤为突出——比如想按业务优先级调整产品类别顺序,或按部门协作逻辑重组数据维度,都需要额外编写复杂代码或手动修改数据源,严重影响工作效率。

为解决这一痛点,SpreadJS V19.0 重磅推出透视表拖动(自定义)排序功能,让用户无需复杂配置,通过直观的拖拽操作即可实现字段项顺序的自由调整,彻底重构透视表数据整理的便捷性。下面,我们将深入解析这一特性的核心价值与使用细节。

核心功能解析:灵活拖拽,精准控序

SpreadJS V19.0 的透视表拖动排序功能,以“直观操作+全面兼容”为设计核心,覆盖多种使用场景,满足不同用户的排序需求:
在这里插入图片描述

1. 多维度拖拽选择,适配多样操作习惯

功能支持四种灵活的拖拽选择方式,无论用户习惯精准选择还是批量操作,都能快速上手:

  • 仅选择字段头(PivotField Header):精准调整单个字段的整体顺序,不影响字段下的值区域;
  • 选择字段头及部分值区域:针对字段下的特定数据项进行排序调整,保留其他项的原有位置;
  • 选择字段头及全部值区域:批量移动整个字段及下属所有数据项,实现维度整体迁移;
  • 点击字段头选择全部值区域:一键选中字段关联的所有数据,简化批量拖拽操作。

2. 可视化拖拽流程,操作直观无门槛

拖拽过程全程伴随清晰的视觉指引,降低操作学习成本:

  1. 鼠标移动到选中区域边缘时,光标自动切换为“移动状态”,明确提示当前区域可拖拽;
  2. 按下鼠标开始拖拽后,系统会显示动态拖拽指示器,实时标注目标插入位置,避免误操作;
  3. 拖拽过程中,指示器会根据鼠标坐标智能判断:列字段按水平(x坐标)定位插入点,行字段按垂直(y坐标)定位,精准匹配透视表结构;
  4. 若拖拽的是父字段,指示器会自动跳过所有子字段的数据区域,确保层级结构不混乱;
  5. 释放鼠标后,选中的字段项会自动插入到指示器标注的位置,排序结果即时生效。

3. 排序选项智能联动,状态同步不脱节

拖拽排序后,字段项的排序状态会自动同步到透视表的排序选项对话框:当用户打开排序设置时,排序方式会默认切换为“手动(manual)”,清晰标识当前为自定义拖拽排序结果,避免与系统自动排序规则冲突,也方便用户后续按需切换排序方式。

典型应用场景:让数据整理更贴合业务逻辑

这一特性的推出,让透视表排序彻底摆脱固定规则的束缚,在多个核心场景中发挥价值:

  • 业务优先级排序:在销售报表中,将重点推广的产品类别拖拽到靠前位置,直观突出核心数据;
  • 协作场景适配:跨部门协作分析时,按协作流程拖拽调整部门、项目等维度顺序,让报表更符合团队工作逻辑;
  • 个性化报表展示:根据汇报对象需求,自定义调整透视表字段顺序,让数据呈现更具针对性;
  • 临时数据重组:数据分析过程中,快速拖拽字段项进行多维度组合尝试,无需修改数据源即可探索不同数据视角。

操作指南:3步完成自定义拖拽排序

  1. 选中目标:在透视表中选择需要排序的字段项(支持前文提到的四种选择方式);
  2. 开始拖拽:鼠标移动到选中区域边缘,待光标变为移动状态后,按下鼠标并拖动;
  3. 确认插入:拖动过程中观察拖拽指示器,到达目标位置后释放鼠标,字段项自动完成排序调整。

注意事项:这些边界场景需留意

为确保功能使用顺畅,以下两类操作暂不支持,开发者需提前知晓:

  1. 不支持选中整行或整列进行字段项拖拽:仅能通过选中“字段头”或“字段头+值区域”的方式进行拖拽,全选行/列无法触发字段项排序;
  2. 不支持同时选择不同父字段下的同名子字段进行拖拽:SpreadJS 仅支持单个子字段的独立拖拽,避免多父字段下的子字段混淆。

总结与展望:让透视表更懂业务需求

SpreadJS V19.0 推出的透视表拖动自定义排序功能,以“直观操作、灵活适配、精准控制”为核心优势,彻底解决了传统透视表排序灵活性不足的痛点,让数据整理更贴合业务逻辑,大幅提升报表制作与数据分析效率。

作为一款面向企业级应用的纯前端表格控件,SpreadJS 始终聚焦开发者与终端用户的实际需求,持续优化透视表等核心功能的使用体验。除了拖动排序,V19.0 还为透视表带来了日期分组、受保护工作表中启用透视表等多项增强能力,全方位提升数据处理能力。

如需了解更多功能细节,可访问 SpreadJS 官网 查看产品文档,或通过 在线 Demo 直接体验新特性。SpreadJS V19.0 即将正式发布,敬请期待这款更强大、更灵活的前端表格控件,为你的业务系统注入新的活力!