SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

獲取SpreadJS v15.0正式版下載

背景

在公司的日常業務中，存在不少數據的收集提取需求，大部分公司會采取Excel來完成數據的收集和匯總，但這項工作會讓負責信息收集的業務人員相當頭大。雖然提前做好了數據收集模板，但最終提交上來的模板會被修改的五花八門，信息填寫錯誤率比較高，無法實現信息填寫不完整不允許提交的約束。后期的數據匯總雖然可以采用手動的復制粘貼來實現，但如果想要把這些數據做結構化存儲，又需要去研發人員去開發一套解析Excel文檔的功能，將這些填報數據提取入庫，整個流程比較繁瑣且出錯率較高。

如果從最開始將這套數據收集的業務完全做在Web端，整體的數據收集任務下發、填報、數據匯總、數據提取完全自動化，這將會大大的提高業務人員的工作效率。本文會帶大家使用純前端表格控件SpreadJS解決這個問題。該控件具備純前端、高性能等特點，在瀏覽器端實現了Excel的大部分功能，使得在線編輯Excel成為可能。使用它，我們不再需要本地安裝Office相關的服務，只要具備一個滿足H5標準的瀏覽器，即可在Web端完成之前需要在本地Excel中完成的一系列操作。

數據收集邏輯

結合SpreadJS和前后端交互邏輯，即可完成一個數據收集的功能，大家如果對源碼內容感興趣可以查看：

在該實例中，使用SpreadJS中的數據綁定設計了數據收集模板與匯總模板；之后開發了數據收據模板下發的功能，將數據收集模板推送給需要填報的相關人員。

對應人員填報后，可以使用SpreadJS中數據綁定獲取數據的相關API，獲取填寫數據。

最終再借助數據綁定，將匯總數據使用數據綁定設置在匯總模板中。通過如上幾步，客戶的填報數據在提交時，就可以以結構化數據存儲在數據庫中，匯總時只需要從數據庫中查詢再設置到匯總模板即可。SpreadJS同時內置了多種數據驗證，在數據提交時，結合數據驗證，可以在模板中包含異常數據時將請求駁回，建立一套嚴謹便捷的數據提交匯總流程。

項目實戰

接下來我們可以一起探索SpreadJS中數據綁定的功能究竟該如何使用。

SpreadJS內部支持了三種數據綁定方式，分別是工作表綁定、單元格綁定與表格綁定。

1. 工作表綁定

通常一個Excel文件會包含多張工作表，如下所示，Sheet2與Sheet3分別代表的就是一張工作表：

工作表級別的數據綁定即將數據與當前工作表建立映射關系，這里列出一些核心的代碼：

let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")

// 獲取designer關聯的Spread對象

let spread = designer.getWorkbook()

// 獲取當前活動的sheet

let sheet = spread.getActiveSheet()

// 模擬綁定數據，表單綁定數據源是一個json數組

function generateData(count){

let data = []

for(let i=0; i\<count;i++){

let item = {}

item.id = i

item.name = `姓名${i}`

item.age = Math.ceil(Math.random()\*10+10)

item.weight = Math.round(Math.random()\*30+20)

data.push(item)

}

return data

}

let data = generateData(100)

// 設置當前工作表的數據源

sheet.setDataSource(data)

執行完成綁定邏輯之后，工作表展示如下：

接下來我們可以在工作表中進行一些刪除行，新增行，修改數據的操作，操作完成之后，調用獲取綁定數據的API，即可獲取當前修改之后的綁定數據：

詳細的demo演示，可以參考實現。

2. 單元格綁定

單元格綁定見名思意，即將單元格與某一個字段key建立映射，用戶填寫的數據可以反應在這個key值對用的value中，本文演示如何借助設計器實現數據綁定。首先，借助設計器，完成一個數據綁定模板的設計，可以參考如下動畫：

通過簡單的拖動，即可完成key值與單元格之間的映射建立，接下來，就可以構造一些默認數據，設置默認的綁定數據。綁定完成之后，可以修改綁定數據，修改完成之后，通過SpreadJS數據綁定獲取數據源的API，即可拿到修改之后的數值。這里其實就是一個填報場景的體現，例如，當前需要收集人員信息表，每一位員工在填寫完成之后，點擊提交時，就可以拿到員工信息的一個json數據，之后前端就可以將這些數據發送給服務端，讓服務端去做存儲了。

SpreadJS中，支持將當前文件導出成一個他們自己能識別的json，模板文件可以以json形式存儲，下次訪問文件時，只需要執行Spread.fromJSON(fileJson)，就可以實現模板文件的保存與加在顯示了，關于表單綁定完整的Demo演示可以，參考詳細的實現代碼。

3. 表格綁定

很多不熟悉Excel的用戶，會直接把一個Excel工作簿或者一個工作表稱為一個表格，但其實這樣的是不正確的。Excel中表格具有特殊的含義，這一點在SpreadJS中也是一致的。在客戶的實際業務中，表格綁定和單元格綁定往往會同時發生，接下來會演示借助SpreadJS在線表格編輯器（設計器）如何實現一個這樣的模板設計：

本文內容源自