基于纯前端类Excel表格控件实现在线损益表应用 _生活百科

财务报表也称对外会计报表，是会计主体对外提供的反映企业或预算单位一定时期资金、利润状况的会计报表，由资产负债表、损益表、现金流量表或财务状况变动表、附表和附注构成。财务报表是财务报告的主要部分，不包括董事报告、管理分析及财务情况说明书等列入财务报告或年度报告的资料。
为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求。而借助控件设计财务报表模板，可以在满足财务数据展示、计算、决策分析的同时，提供如 Excel 一般的使用体验，并可直接复用财务系统原始的 Excel 报表模板，减少从本地到线上的数据迁移工作量。
下面将会给大家展示如何在纯前端环境中，利用纯前端表格控件创建损益表，并将其添加到你的Web项目中。本文将使用 PivotTables（数据透视表）和 PivotTables Slicer（数据透视表切片器）来创建动态的损益表报告并与之交互。最终效果如图：

文章插图
创建损益表大致步骤如下，文中针对每一步操作，都提供了可视化交互和编码两种实现方式：

设置数据
插入数据透视表
构建数据透视表
添加计算项
添加计算字段
添加切片器
进行一些外观调整
生成报告

点击此处下载完整Demo 。
设置数据我们需要做的第一件事就是确保原始数据采用表格格式。这表示数据符合以下条件：

把原始数据整理成标准的表格；
每个列代表一个字段；
没有空白行或列；
数据中没有小计、总计这类二次计算的内容。

在此示例中，我们添加了 Account Group 列来表示报告的不同部分，并将包含数据的表命名为 tblIncome 。

文章插图
插入数据透视表使用设计器组件可以实现可视化操作，下载完成后，从“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”文件夹安装设计器，然后按照以下步骤插入数据透视表：

选择 tblIncome 表
在插入选项卡上单击数据透视表
选择“新工作表”
最后确定

文章插图
或者，以上操作也可以通过编写javascript代码实现，参考以下代码：
let pivotTable = sheet.pivotTables.add("myPivotTable", "tblIncome", 1, 1);构建数据透视表为了准确构建数据透视表，我们将使用数据透视表面板。如果这里使用的是SpreadJS设计器，则每次单击数据透视表时，面板都会显示在工作表的右侧。
使用以下代码将其添加到 javascript 实例中：

var pt = spread.getActiveSheet().pivotTables.all()[0];var panel = new GC.Spread.Pivot.PivotPanel('myPivotPanel', pt, document.getElementById("panel"));panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields |GC.Spread.Pivot.PivotPanelSection.area);

现在拖放右侧区域的字段以构建数据透视表。在我们的示例中：将 Account Group 和 Account 字段添加到 Rows，并将 Actual 和 Budget 添加到 Values 。

文章插图
注意：数据透视表可以在没有数据透视面板的情况下工作，我们只是添加了它以方便使用。
添加计算项除了数据透视表字段中的现有项目外，这里还支持使用自定义公式创建一个或多个计算项目。

单击数据透视表分析
字段、项目和集合 → 计算项目
设置名称 3. Gross Profit 并作为公式：='Account Group'['1.收入']-'账户组'['2.销货成本']

文章插图
或者使用一行代码就可以添加计算项目：
pivotTable.addCalcItem("Account Group", "3. Gross Profit","='Account Group'['1. Revenue']-'Account Group'['2. COGS']");按照上述步骤添加其他计算项。这些公式如下表所示：