前言
Excel擁有在辦公領域最廣泛的受衆羣體，以其強大的數據處理和可視化功能，成了無可替代的工具。它不僅可以呈現數據清晰明瞭，還能進行數據分析、圖表製作和數據透視等操作，爲用戶提供了全面的數據展示和分析能力。
今天小編就爲大家介紹一下，如何通過葡萄城公司的純前端表格控件SpreadJS和後端表格組件GcExcel實現一張Excel報表模板並進行數據的錄入與填報。
環境準備
前端
設計Excel報表模板
1. 加載製作報表的數據源：
打開SpreadJS在線表格編輯器，在設計分組報表之前，需要數據準備的相關工作，點擊表格工具欄上【數據】Tab中的【數據源】按鈕，爲其添加好數據源。 
通過【添加表】按鈕添加每一個數據源對象（每一個數據源對象對應一張表），並配置讀取數據的路徑（路徑可以是一個請求對應格式數據源的地址，也可以是一個服務端請求的地址，由服務端返回一個符合格式的數據源對象）。
數據路徑爲可選字段，如果json中包含多個數據源，可以通過設置數據路徑進行區分。 
2. 添加報表模板：
添加完數據源之後，點擊【插入】Tab的報表按鈕，插入一張新的報表模板，之前添加的數據源對象會在左側的數據源列表中顯示，如下圖所示。 
3. 設置分組報表：
通過拖拽左側數據源列表中的字段，可以快速構建一個按照銷售區域、省市、商品類型字段進行層層分組，統計銷售額和利潤的報表模板，如下圖所示： 
4. 保存Excel模板爲sjs文件 
修改Excel報表模板
將Excel報表模板保存爲.sjs文件後，小編現在需要將**Excel報表模板中的部分單元格轉換爲GcExcel模板語言，**具體操作如下：
把.sjs文件放到SpreadJS前端代碼的根目錄下 
5. 將Excel模板轉化爲GcExcel模板語法
以Excel報表模板（如下圖所示）中的C4單元格（省份）爲例，小編先通過getBindingPath方法拿到模板api的信息（下圖中的DevTools中的隊列信息） 
獲取到api的信息之後，再解析出它的綁定路徑：
//此爲部分代碼，完整代碼在文末的Gitee鏈接中
let binding = template.getBindingPath(r, c) // binding內容如上圖
// ...
// 綁定路徑
let path = ""
switch (binding && binding.type) {
case "Group":
case "List":
if (binding.binding) {
let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
path += ds + "." + p // path="銷售數據.省份"
}
break;
// ...
}
然後再解析出其合併類型和擴展方向：
// Group類型
let group = ""
if (binding && binding.type == "Group") {
group = "G=M"
} else if (binding && binding.type == "List") {
group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
expand = "E=H"
}
最後將這些信息整合在一起，加上雙花括號後，那麼導出的Excel文件中的C4單元格的內容應該是如下的GcExcel模板語法：
{{ds.銷售數據.省份(E=V,G=M)}}
6. 運行前端項目，導出Excel模板文件
- 輸入指令【npm install】下載依賴
- 輸入指令【npm run start】啓動項目（啓動後如下圖所示）
最後將修改後的模板導出爲Excel文件，如下圖所示，可以看到，省份單元中的信息已經修改爲GcExcel模板語法。
後端
打開GcExcel後端代碼，將前面導出的Excel模板文件放到代碼文件的根目錄下，最後運行的main函數即可將數據傳入Excel模板文件，最後會生成一個帶數據的Excel報表。 
結語
以上就是如何使用SpreadJS+GcExcel製作一張Excel報表的全過程，如果您想了解更多信息，歡迎點擊這裏查看。
擴展鏈接：