SpreadJS支持了很多Excel不支持的單元格類型，例如復(fù)選框單元格、單選列表、復(fù)選框列表等等，這為用戶在展示數(shù)據(jù)時提供了直觀易用的選擇方式。

點擊獲取SpreadJS工具下載

然而，當(dāng)用戶將包含此類型的的文件導(dǎo)出Excel時，就會發(fā)現(xiàn)出現(xiàn)了一定的問題。以復(fù)選框為例，在SpreadJS中用戶處于選中狀態(tài)，而當(dāng)導(dǎo)出到Excel中時，會發(fā)現(xiàn)復(fù)選框區(qū)域的數(shù)值變成True了。

這是因為，復(fù)選框呈現(xiàn)出的小框?qū)儆赟preadJS特有的樣式信息，而當(dāng)getValue()時，取到的其實仍舊是true/false/null。而導(dǎo)出到Excel時，Excel并不支持這種樣式信息，獲取到的依舊是true/false/null。

本文以復(fù)選框為例，實現(xiàn)一個將復(fù)選框?qū)С龅紼xcel，并使其維持正常樣式的方案。

實現(xiàn)思路：

Step1： 導(dǎo)出前循環(huán)判斷sheet中是否包含復(fù)選框單元格；

sheet.getCellType(i,j) instanceof GC.Spread.Sheets.CellTypes.CheckBox

Step2: 判斷復(fù)選框時否為三態(tài)復(fù)選框，根據(jù)不同的狀態(tài)取對應(yīng)的值；

let text = ''
let checkbox = sheet.getCellType(i,j)
if(sheet.getCellType(i,j).isThreeState()){
text = sheet.getValue(i,j) ? checkbox.textTrue() : (
sheet.getValue(i,j) == null ? checkbox.textIndeterminate():checkbox.textFalse()
)}else{
text = sheet.getValue(i,j) ? sheet.textTrue() : sheet.textFalse()
}

Step3:將復(fù)選框坐在單元格類型置空；

sheet.setCellType(i,j,nulll)

Step4: 設(shè)置文本樣式給對應(yīng)的單元格。

sheet.getValue(i,j) ? sheet.setValue(i,j,'☑ ' + text) : sheet.setValue(i,j,'☐ ' + text）

通過上述四步，就可以完成將復(fù)選框?qū)С鯡xcel的功能了。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國軟件行業(yè)協(xié)會認(rèn)定為“中國優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報、 類 Excel 報表設(shè)計等業(yè)務(wù)場景需求，極大的降低企業(yè)研發(fā)成本和項目交付風(fēng)險。

本文轉(zhuǎn)載自