1. 首頁 > 生活百科 > >

基于純前端類Excel表格控件實現在線損益表應用

生活百科

財務報表也稱對外會計報表，是會計主體對外提供的反映企業或預算單位一定時期資金、利潤狀況的會計報表，由資產負債表、損益表、現金流量表或財務狀況變動表、附表和附注構成 。財務報表是財務報告的主要部分，不包括董事報告、管理分析及財務情況說明書等列入財務報告或年度報告的資料 。
為了全面系統地揭示企業一定時期的財務狀況、經營成果和現金流量 ， 財務報表需按財政部會計準則的標準格式設計，因此，財務報表的典型特征是數據更新頻繁、分析維度多、數據來源復雜，常規的報表工具很難同時滿足上述所有需求 。而借助控件設計財務報表模板，可以在滿足財務數據展示、計算、決策分析的同時，提供如 Excel 一般的使用體驗，并可直接復用財務系統原始的 Excel 報表模板，減少從本地到線上的數據遷移工作量 。
下面將會給大家展示如何在純前端環境中，利用純前端表格控件創建損益表 ， 并將其添加到你的Web項目中 。本文將使用 PivotTables（數據透視表）和 PivotTables Slicer（數據透視表切片器）來創建動態的損益表報告并與之交互 。最終效果如圖：

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
創建損益表大致步驟如下，文中針對每一步操作 ， 都提供了可視化交互和編碼兩種實現方式：
  1. 設置數據
  2. 插入數據透視表
  3. 構建數據透視表
  4. 添加計算項
  5. 添加計算字段
  6. 添加切片器
  7. 進行一些外觀調整
  8. 生成報告
點擊此處下載完整Demo 。
設置數據我們需要做的第一件事就是確保原始數據采用表格格式 。這表示數據符合以下條件：
  1. 把原始數據整理成標準的表格；
  2. 每個列代表一個字段；
  3. 沒有空白行或列；
  4. 數據中沒有小計、總計這類二次計算的內容 。
在此示例中 ， 我們添加了 Account Group 列來表示報告的不同部分 ， 并將包含數據的表命名為 tblIncome 。
基于純前端類Excel表格控件實現在線損益表應用

文章插圖
插入數據透視表使用設計器組件可以實現可視化操作，下載完成后，從“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”文件夾安裝設計器，然后按照以下步驟插入數據透視表：
  1. 選擇 tblIncome 表
  2. 在插入選項卡上單擊數據透視表
  3. 選擇“新工作表”
  4. 最后確定

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
或者，以上操作也可以通過編寫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表格控件實現在線損益表應用

文章插圖
注意：數據透視表可以在沒有數據透視面板的情況下工作，我們只是添加了它以方便使用 。
添加計算項除了數據透視表字段中的現有項目外，這里還支持使用自定義公式創建一個或多個計算項目 。
  1. 單擊數據透視表分析
  2. 字段、項目和集合 → 計算項目
  3. 設置名稱 3. Gross Profit 并作為公式：='Account Group'['1.收入']-'賬戶組'['2.銷貨成本']

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
或者使用一行代碼就可以添加計算項目：
pivotTable.addCalcItem("Account Group", "3. Gross Profit","='Account Group'['1. Revenue']-'Account Group'['2. COGS']");按照上述步驟添加其他計算項 。這些公式如下表所示：
基于純前端類Excel表格控件實現在線損益表應用

文章插圖
這將使我們的損益表可讀性更好 。
添加計算字段損益表經常使用方差分析進行業績比較 。當實際收入回報高于預算預測或費用低于預算時，預算變化是積極的或有利的 。

推薦閱讀