财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金、利润状况的会计报表,由资产负债表、损益表、现金流量表或财务状况变动表、附表和附注构成 。财务报表是财务报告的主要部分,不包括董事报告、管理分析及财务情况说明书等列入财务报告或年度报告的资料 。
为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量 , 财务报表需按财政部会计准则的标准格式设计,因此,财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂,常规的报表工具很难同时满足上述所有需求 。而借助控件设计财务报表模板,可以在满足财务数据展示、计算、决策分析的同时,提供如 Excel 一般的使用体验,并可直接复用财务系统原始的 Excel 报表模板,减少从本地到线上的数据迁移工作量 。
下面将会给大家展示如何在纯前端环境中,利用纯前端表格控件创建损益表 , 并将其添加到你的Web项目中 。本文将使用 PivotTables(数据透视表)和 PivotTables Slicer(数据透视表切片器)来创建动态的损益表报告并与之交互 。最终效果如图:
![基于纯前端类Excel表格控件实现在线损益表应用](http://img.zhejianglong.com/231018/115P04500-0.png)
文章插图
创建损益表大致步骤如下,文中针对每一步操作 , 都提供了可视化交互和编码两种实现方式:
- 设置数据
- 插入数据透视表
- 构建数据透视表
- 添加计算项
- 添加计算字段
- 添加切片器
- 进行一些外观调整
- 生成报告
设置数据我们需要做的第一件事就是确保原始数据采用表格格式 。这表示数据符合以下条件:
- 把原始数据整理成标准的表格;
- 每个列代表一个字段;
- 没有空白行或列;
- 数据中没有小计、总计这类二次计算的内容 。
![基于纯前端类Excel表格控件实现在线损益表应用](http://img.zhejianglong.com/231018/115P04K7-1.png)
文章插图
插入数据透视表使用设计器组件可以实现可视化操作,下载完成后,从“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”文件夹安装设计器,然后按照以下步骤插入数据透视表:
- 选择 tblIncome 表
- 在插入选项卡上单击数据透视表
- 选择“新工作表”
- 最后确定
![基于纯前端类Excel表格控件实现在线损益表应用](http://img.zhejianglong.com/231018/115P023D-2.png)
文章插图
或者,以上操作也可以通过编写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 。![基于纯前端类Excel表格控件实现在线损益表应用](https://m.360buyimg.com/jdcms/jfs/t1/183455/10/29429/582752/63493488E73bd2149/e6b4255fcf7b80d0.gif)
文章插图
注意:数据透视表可以在没有数据透视面板的情况下工作,我们只是添加了它以方便使用 。
添加计算项除了数据透视表字段中的现有项目外,这里还支持使用自定义公式创建一个或多个计算项目 。
- 单击数据透视表分析
- 字段、项目和集合 → 计算项目
- 设置名称 3. Gross Profit 并作为公式:='Account Group'['1.收入']-'账户组'['2.销货成本']
![基于纯前端类Excel表格控件实现在线损益表应用](http://img.zhejianglong.com/231018/115P04H6-4.png)
文章插图
或者使用一行代码就可以添加计算项目:
pivotTable.addCalcItem("Account Group", "3. Gross Profit","='Account Group'['1. Revenue']-'Account Group'['2. COGS']");
按照上述步骤添加其他计算项 。这些公式如下表所示:![基于纯前端类Excel表格控件实现在线损益表应用](http://img.zhejianglong.com/231018/115P0G51-5.png)
文章插图
这将使我们的损益表可读性更好 。
添加计算字段损益表经常使用方差分析进行业绩比较 。当实际收入回报高于预算预测或费用低于预算时,预算变化是积极的或有利的 。
推荐阅读
- 咋发朋友圈纯文字(男人高级自嘲经典句子)
- 怎么样发朋友圈只发文字(怎样发纯文字的朋友圈)
- 知识图谱实体对齐2:基于GNN嵌入的方法
- 15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成
- Java一次返回中国所有省市区三级树形级联+前端vue展示【200ms内】
- 《基于Apache Flink的流处理》读书笔记
- 挑战海量数据:基于Apache DolphinScheduler对千亿级数据应用实践
- AgileBoot - 基于SpringBoot + Vue3的前后端快速开发脚手架
- 巧用VBA实现:基于多个关键词模糊匹配Excel多行数据
- Go_Channel详解