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

獲取SpreadJS v15.0正式版下載

背景

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

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

數(shù)據(jù)收集邏輯

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

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

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

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

項目實戰(zhàn)

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

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

1. 工作表綁定

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

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

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

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

let spread = designer.getWorkbook()

// 獲取當前活動的sheet

let sheet = spread.getActiveSheet()

// 模擬綁定數(shù)據(jù)，表單綁定數(shù)據(jù)源是一個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è)置當前工作表的數(shù)據(jù)源

sheet.setDataSource(data)

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

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

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

2. 單元格綁定

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

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

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

3. 表格綁定

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

本文內(nèi)容源自