SpreadJS V17.0：报表插件首次发布，极大简化报表设计及生成过程

大家好，欢迎来到IT知识分享网。

SpreadJSV17.0迎来重磅更新——全新报表插件。作为在数据处理和表格文档协同编辑方面提供类 Excel 功能的领导者，SpreadJS 一直致力于降低企业的研发成本和项目交付风险。在最新版本中，特别推出报表插件的全新升级和功能扩展，以满足更广泛的业务场景需求。

新的报表插件将进一步强化用户对于数据的管理、分析和呈现能力，这不仅使得类 Excel 报表设计变得更加简便高效，而且可以通过引入甘特图插件、瀑布图表、棒棒糖迷你图等新功能，为数据可视化提供更多可能。此外，增强的粘贴选项等细节改进，旨在优化用户的操作体验，确保高效准确地完成数据填报和报表生成。

通过SpreadJS V17.0 的发布，再次展现了葡萄城对技术创新的承诺和对客户需求的深刻理解。全新报表插件的发布不仅标志着SpreadJS产品功能的进一步丰富和完善，更为各行各业数字化转型提供强大的支持。

新插件 / Addon

报表插件 / ReportSheet

各类报表示例

报表设计器

报表性能

测试环境：

ThinkPad

Memory: 32G

CPU: 13th Gen Intel(R) Core(TM) i7-13700H 2.40 GHz

Chrome: 119.0.6045.160 (Official Build) (64-bit)

计量单位：

时长单位：ms / 毫秒

内存单位：MB / 兆

基于行的报表

分组报表

交叉统计表

支持使用 Excel 作为报表模板

支持报表设计向导功能

甘特图插件 / GanttSheet

甘特图插件允许您创建工作分解、生产计划及计划进度等甘特图类型。这是一个可快速数据绑定的 DataTable 视图，具有甘特图行为和电子表格用户界面。使用甘特图能够带来以下价值：

• 可视化规划：提供项目任务、时间表和依赖关系的清晰可视化表示，帮助有效规划和管理项目。
• 任务依赖性：允许定义和可视化任务依赖性，了解不同任务的链接方式以及延迟对整个项目时间表的影响。
• 进度跟踪：通过标记已完成的任务并将其与计划时间表进行比较来跟踪每个任务和整个项目的进度。
• 截止日期管理：能够设置和管理项目里程碑和截止日期，确保项目保持正轨并在指定的时间范围内完成。

除此之外，在SpreadJSV17.0正式版本中，增加了“资源”能力，可针对项目管理需要对资源进行分配。

图表增强

新增的瀑布图表

将运行总计显示为添加或减去的值，这些值排列为具有正值和负值的列，并通过颜色编码来区分两者。其中，初始列和最终列通常与水平轴对齐，而中间值通常是浮动列。

折线图的平滑线格式

SpreadJSV17.0 中的折线图可支持平滑线条的格式。

图表的数据来自多个区域

与 Excel 类似，SpreadJSV17.0 能够支持使用多选插入图表。

除了选择连续的数据区域之外，还可以按 Ctrl 键选择多个不连续的区域来创建图表。

也可以通过在每个范围之间放置逗号来在代码中指定多个范围：

JavaScript sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$4,Sheet1!$E$3:$G$3,Sheet2!$A$1:$A$3");

新增的棒棒糖迷你图

工作表增强

增强的粘贴选项

SpreadJS V17.0新版本中支持更多特殊粘贴选项，包括：

Comments -仅粘贴备注

Validation – 仅粘贴数据验证

All using Source theme – 全部使用源主题

All except borders – 粘贴除边框外的所有单元格内容和格式

Column Widths – 粘贴复制的一个列或多个列的宽度

Formulas and Number Formats – 仅粘贴公式和所有数字格式选项

Values and Number Formats – 仅粘贴值和所有数字格式选项

扩展自定义表格列样式

当表自动扩展时，自定义表列样式可被正确复制。

事件增强

TopRowChanged 和 LeftColumnChanged 事件能够支持像素滚动。在此更改之前，必须滚动整个行或列才能触发事件，但在新版本中，当启用像素滚动时，它将触发并为滚动中的任何更改提供滚动状态。

水平分布对齐

SpreadJS 新版本能够支持文本的分布式水平对齐，如下图所示：

保留 Excel 排序状态

导入 Excel 文件时，SpreadJSV17.0 新版本能够保留排序条件，避免丢失。

透视表增强

样式中字体设置

将字体选项拆分为不同属性，以更好地支持 Excel 中的数据透视表和表格字体选项。

通常，单元格上的字体属性可用于设置所有字体选项，新版本还提供了 API 来设置单独的字体选项，如 fontFamily、fontSize、fontWeight 和 fontStyle：

JavaScript // Font activeSheet.getCell(2, 0).font('italic normal 12px Mangal'); activeSheet.getCell(4, 0).font('normal bold 15px Arial Black'); activeSheet.getCell(6, 0).font('normal normal 18px Georgia'); // FontFamily activeSheet.getCell(2, 1).fontFamily('Mangal'); activeSheet.getCell(4, 1).fontFamily('Arial Black'); activeSheet.getCell(6, 1).fontFamily('Georgia'); // FontSize activeSheet.getCell(2, 2).fontSize('12px'); activeSheet.getCell(4, 2).fontSize('20px'); activeSheet.getCell(6, 2).fontSize('28px'); // FontWeight activeSheet.getCell(2, 3).fontWeight('bold'); activeSheet.getCell(4, 3).fontWeight('normal'); // Italic activeSheet.getCell(2, 4).fontStyle('italic'); activeSheet.getCell(4, 4).fontStyle('normal');

区域偏移支持

SpreadJSV17.0提供了一个偏移属性来设置数据透视表中特定数据透视区域的样式。

可以使用此偏移量来指定要设置样式的区域的行、列、行计数和列计数：

JavaScript let style = new GC.Spread.Sheets.Style(); style.backColor = "rgb(247, 167, 17)"; let labelPivotAreaWithOffset = { labelOnly: true, references: [{ fieldName: "Salesperson", items: ["Alan"] }], offset: { row: 1, col: 0, rowCount: 3, colCount: 1 } }; pivotTable.setStyle(labelPivotAreaWithOffset, style); let cornerPivotAreaWithOffset = { type: GC.Spread.Pivot.PivotAreaType.corner, offset: { row: 0, col: 1, rowCount: 1, colCount: 1 } }; pivotTable.setStyle(cornerPivotAreaWithOffset, style); let topRightPivotAreaWithOffset = { type: GC.Spread.Pivot.PivotAreaType.topRight, offset: { row: 0, col: 0, rowCount: 1, colCount: 4 } }; pivotTable.setStyle(topRightPivotAreaWithOffset, style);

集算表增强

引用计算字段

DataManager 支持从数据源添加字段，SpreadJSV17.0新版本还支持具有公式数据类型的虚拟列。之后可以在集算表的视图中使用这些公式列来显示运行总和或股票价值比率等内容：

JavaScript // Add product table. var productTable = dataManager.addTable("productTable", { remote: { read: { url: baseApiUrl + "/Product" } }, schema: { columns: { TotalUnits: { dataType: "formula", value: "[@UnitsInStock] + [@UnitsOnOrder]" }, StockValue: { dataType: "formula", value: "[@UnitPrice] * ([@TotalUnits])" } } } }); // Bind a view to the table sheet var myView = productTable.addView("myView", [ { value: "Id", caption: "ID", width: 50 }, { value: "ProductName", caption: "Name", width: 170 }, { value: "UnitPrice", caption: "Unit Price", style: { formatter: "$#,0.00" }, width: 120 }, { value: "UnitsInStock", caption: "Units In Stock", width: 120 }, { value: "TotalUnits", caption: "Total Units", width: 120 }, { value: "StockValue", caption: "Stock Value", style: { formatter: "$#,0.00" }, width: 120 }, { value: "=SUM([#1:@[UnitPrice]]*([#1:@[UnitsInStock]]+[#1:@[UnitsOnOrder]])", caption: "Running SUM", style: { formatter: "$#,0.00" }, width: 150 }, { value: "=[@StockValue]/SUM([UnitPrice] * ([UnitsInStock] + [UnitsOnOrder]))", caption: "Stock Value Ratio", style: { formatter: "0.00%" }, width: 160 } ]);

针对列的触发公式

集算表中的触发器公式是根据特定条件或触发器进行计算的公式。

这意味着可以根据特定条件重新计算数据，在输入新值时清理数据，或为列提供默认值。以下是触发公式的一些示例：

JavaScript var table = dataManager.addTable("Table", { schema: { columns: { createdDate: { dataType: "Date", trigger: { when: "onNew", <<------- apply the formula on created formula: "=NOW()", <<------- trigger formula to set current time // fields: "*" <<------- when triggered on new, there is no need to specify the affected fields }, }, updatedDate: { dataType: "Date", trigger: { when: "onNewAndUpdate", <<------- apply the formula on created and updated formula: "=NOW()", <<------- trigger formula to set current time fields: "*" <<------- all fields changed will have the formula applied to them }, }, label: { trigger: { when: "onNewAndUpdate", <<------- apply the formula on updated formula: "=UPPER([@label])" <<------- use the upper formula on the input text of the label field fields: "label", <<------- when the current column value is updated the formula will be applied }, }, amount: { dataType: "number", trigger: { when: "onNewAndUpdate", <<------- apply the formula on updated formula: "=[@price] * [@quantity]" <<------- automatically evaluate the amount fields: "price,quantity", <<------- the changes of the price and quantity columns will cause the formula to calculate }, }, price: { dataType: 'number' }, quantity: { dataType: 'number' } }, } });

设计器增强

SpreadJSV17.0 支持为组合键添加自定义快捷命令。在 Github 的项目中实现了一些 Excel 标准，用户可以从 GitHub 下载。

在 SpreadJSV17.0 版本中，默认将此项目中的快捷方式添加到设计器组件中，以便在设计器中无需任何额外代码即可使用快捷方式。

以上就是纯前端控件SpreadJSV17.0版本的主要功能介绍，如需了解更多新版本信息，欢迎访问葡萄城官网。