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

獲取SpreadJS v15.0正式版下載

背景

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

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

數(shù)據收集邏輯

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

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

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

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

項目實戰(zhàn)

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

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

1. 工作表綁定

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

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

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

// 獲取designer關聯(lián)的Spread對象

let spread = designer.getWorkbook()

// 獲取當前活動的sheet

let sheet = spread.getActiveSheet()

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

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)

// 設置當前工作表的數(shù)據源

sheet.setDataSource(data)

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

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

詳細的demo演示，可以參考實現(xiàn)。

2. 單元格綁定

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

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

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

3. 表格綁定

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

本文內容源自