純前端表格工具使用 - SpreadJS如何將複選框導出Excel

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

點擊獲取SpreadJS工具下載

然而，當用戶將包含此類型的的文件導出Excel時，就會發現出現了一定的問題。以複選框爲例，在SpreadJS中用戶處於選中狀態，而當導出到Excel中時，會發現複選框區域的數值變成True了。

這是因爲，複選框呈現出的小框屬於SpreadJS特有的樣式信息，而當getValue()時，取到的其實仍舊是true/false/null。而導出到Excel時，Excel並不支持這種樣式信息，獲取到的依舊是true/false/null。

本文以複選框爲例，實現一個將複選框導出到Excel，並使其維持正常樣式的方案。

實現思路：

Step1： 導出前循環判斷sheet中是否包含複選框單元格；

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

Step2: 判斷複選框時否爲三態複選框，根據不同的狀態取對應的值；

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:將複選框坐在單元格類型置空；

sheet.setCellType(i,j,nulll)

Step4: 設置文本樣式給對應的單元格。

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

通過上述四步，就可以完成將複選框導出Excel的功能了。

SpreadJS | 下載試用

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

本文轉載自葡萄城