SpreadJS导出CheckBox样式失效

SpreadJS支持了很多Excel不支持的单元格类型，例如复选框单元格、单选列表、复选框列表等等，这为用户在展示数据时提供了直观易用的选择方式。
然而，当用户将包含此类型的的文件导出Excel时，就会发现出现了一定的问题。
以复选框为例，在SpreadJS中用户处于选中状态，而当导出到Excel中时，会发现复选框区域的数值变成True了。
这是因为，复选框呈现出的小框属于SpreadJS特有的样式信息，而当getValue()时，取到的其实仍旧是true/false/null。
而导出到Excel时，Excel并不支持这种样式信息，获取到的依旧是true/false/null。
本文以复选框为例，实现一个将复选框导出到Excel，并使其维持正常样式的方案。
实现思路：
Step1： 导出前循环判断sheet中是否包含复选框单元格；

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

复制代码

Step2: 判断复选框时否为三态复选框，根据不同的状态取对应的值；

1. let text = ''
   
2. let checkbox = sheet.getCellType(i,j)
   
3. if(sheet.getCellType(i,j).isThreeState()){
   
4.     text = sheet.getValue(i,j) ?  checkbox.textTrue() : (
   
5.     sheet.getValue(i,j) == null ? checkbox.textIndeterminate():checkbox.textFalse()
   
6. )}else{
   
7.     text = sheet.getValue(i,j) ? sheet.textTrue() :  sheet.textFalse()
   
8. }

复制代码

Step3:将复选框坐在单元格类型置空；

1. sheet.setCellType(i,j,nulll)

复制代码

Step4: 设置文本样式给对应的单元格

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

复制代码

通过上述四步，就可以完成将复选框导出Excel的功能了。

第二步中的else代码块中sheet没有textTrue()和textFalse()，应该是博主手误了。应该改成
text = sheet.getValue(i,j) ? checkbox.textTrue() :  checkbox.textFalse()

楼主的方法是在SpreadJS老版本的情况下对复选框单元格导出的一种妥协，因为实际上导出之后呈现的框也只是一个字符，并不能点击，如果想要让他变成一个能够在导出之后也能互动的复选框，v16版本的复选框形状可以有效满足该要求，我们只需要对楼主的方法做一些小小的改变即可，复选框形状的demo，可以看这个：
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/shapes/form-control/check-box/purejs

1. 添加复选框形状
本质上复选框形状是一个悬浮的控件，因此需要对添加的形状的位置进行精确定位，经过测试发现只能用for循环来累加复选框形状的x和y的坐标位置
let sheet = spread_copy.getActiveSheet()
let row = sheet.getRowCount()
let col = sheet.getColumnCount()
var x = 0;
var y = 0;
for (let i = 0; i < row; i++) {
    var hangArr = [];
    for (let j = 0; j < col; j++) {
        // 当前单元格信息
        var cellWidth = sheet.getCell(-1, j).width();
        var cellHeight = sheet.getCell(i, -1).height();

        if (sheet.getCellType(i, j) instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
            cellTypeToShape(sheet, x, y, cellWidth, cellHeight, i, j);
        }

        x += cellWidth;
        if (j == col - 1) {
            x = 0;
            y += cellHeight;
        }
    }
}

2. 将复选框单元格转字符串”口 xxxxxx“改为复选框单元格转复选框形状
var checkBoxValue = false;
sheet.getValue(row, col) ? checkBoxValue = sheet.getValue(row, col) : checkBoxValue = false;
checkBox.value(checkBoxValue);


配合复选框形状的改造，基本无感知的解决复选框单元格类型导出失败的问题了