SpreadJS导出CheckBox样式失效

收藏

本帖最后由 Winny 于 2021-6-28 17:03 编辑

SpreadJS支持了很多Excel不支持的单元格类型，例如复选框单元格、单选列表、复选框列表等等，这为用户在展示数据时提供了直观易用的选择方式。
然而，当用户将包含此类型的的文件导出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的功能了。

Richard.Huang · Richard.Huang

第二步中的else代码块中sheet没有textTrue()和textFalse()，应该是博主手误了。

应该改成
text = sheet.getValue(i,j) ? checkbox.textTrue() : checkbox.textFalse()

Richard.Huang · Richard.Huang

本帖最后由 Richard.Huang 于 2023-8-2 18:01 编辑

楼主的方法是在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);

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

image.png103023985.png

Joestar.Xu · Joestar.Xu

		自动登录	找回密码
密码			立即注册

SpreadJS导出CheckBox样式失效

3 个回复

SpreadJS 认证

SpreadJS 高级认证