表格导出Excel常见问题

问题：关于表格（Table）在导出 Excel 时常见问题的整理

类型一：Table 数据绑定后导出 Excel 发生报错

首先回答 table 数据绑定在导出时为什么会报错。

这是因为在 Excel 中，table 是一个被限制比较严格的元素。
Excel 不允许 table 中出现合并单元格、表头隐藏等，但为了给复杂报表提供支持，SpreadJS 中是没有加入这些限制的。
因此两者限制不匹配会导致一些报错出现。

SpreadJS 中使用 table 绑定可能做的最多的就是隐藏表头，V13 版本已经支持原生隐藏 table 列头数据的功能，

以提供给大家更为灵活的报表展现方式。参考学习指南：表格样式

但是实际生产过程中，我们需要使用 SpreadJS 展示 List 数据，很多情况下只能用 table 绑定，但 Excel 中有没有办法实现单元格合并，因此我们可以结合实际的需要做一些样式上的妥协，我们导出 Excel 时，不需要保留 table，只要能留下 table 的数据即可。

也就是说，我们可以在导出时删除 table 元素，但保留 table 中的数据即可。那么怎么删除 table 可以不影响数据呢？其实 SpreadJS 提供了原生的命令：tableToRange

调用方式很简单，参考代码：

spread.commandManager().execute({
    cmd: "tableToRange",
    sheetName: sheet.name(),
    tableName: tables[i].name()
});

详情代码请参考该论坛链接

类型二：通过 `table.setColumnDataFormula()` 设置公式，当数据量较大时性能会很差，且未设置公式的列会报错

首先，因为表单更改后，SpreadJS 会自动刷新并重绘和更新整个控件内容，一次性做出大量改变势必会造成每次改变都重新绘制表单，因此可以通过 suspendPaint 方法将整个 SpreadJS 绘制挂起，等整个公式逻辑处理完成之后再用 resumePaint 方法恢复绘制就可以大大提升因为数据量较大造成的性能问题。实例代码如下：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// TODO 公式逻辑.........
sheet.recalcAll();
sheet.resumePaint();

第二个问题，公式报错是因为用户通过 Filter.HideRowFilter 为 table 设置了筛选，但实际上 table 自带筛选功能，无需二次筛选,因此开启筛选会造成冲突，将代码中的开启单元格筛选的代码注释之后就不会再报错了

// 开启单元格筛选
// var cellRange = new GC.Spread.Sheets.Range(1, 0, dataSource.length, 12);
// var hideRowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(cellRange);
// sheet.rowFilter(hideRowFileter);

类型三：老版本不同 sheet 中 table 出现同名导致导出的文件失败

SpreadJS 和 Excel 存在 table 校验的差异，Excel 不允许在同一个工作簿不同表单中存在相同名称的 table，但是 SpreadJS 在 tableName 上没有较高的限制，因此即使在 SpreadJS 中显示正常，但导出为 Excel 后打开会失败

新版本的 SpreadJS 会在导出时将相同名称的 table 重命名，新版本的 SpreadJS 设计器甚至会在你创建同名 table 提示你，因此就不会出现该问题

类型四：table 中使用了合并单元格导致导出后的 Excel 内容丢失

SpreadJS 中对 table 进行了单元格合并

但是导出成 Excel 文件并打开会发现提示：

以及内容丢失：

以上情况是因为 SpreadJS 支持 table 的单元格合并，但是 Excel 并不支持该功能，因此会存在用 Excel 打开发现内容失效的问题，为了避免这个情况的发生，用户在设计 SpreadJS 时可以考虑禁止使用者在 table 区域做合并单元格的操作，具体可以参考这篇文章

禁止 table 合并可以使用 selectionChanging 事件中判断是否是 table 区域来实现，如果是 table 区域，通过将 cusTest 设置为 true 即可禁止粘贴

sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e, info) {
    var tableRange = table2.range();
    const {row,rowCount,col,colCount}  = tableRange
    var newSelections = info.newSelections;
    const {row:selRow,rowCount:selRowCount,col:selCol,colCount:selColCount} = newSelections[0];
    if(selRow>=row && selRow<=row+rowCount && selCol>=col && selCol<=col+colCount){
        //选中在此区域
        designer.setData("cusTest",true);
        designer.refresh();
    }else {
        designer.setData("cusTest", false)
    }
});

具体实现见论坛精华帖

类型五：创建 table，当列数或者行数超过某个阈值会出现报错：`Invalid column index or column count`

SpreadJS 提供的数据绑定方式绑定表格数据会自动扩展行数列数，数据绑定请参考链接：使用在线表格编辑器如何设置数据绑定模板

如果不是通过绑定方式来新建表格，那么需要用填写具体的行数和列数

sheet.tables.add('table1', 0, 0, 4, 4);

出现报错是因为，table 的列数或者行数超出了 sheet 的列数和行数，因此用户应该在创建 table 之前判断一下 sheet 的宽高，该问题想了解更多可以参考这篇帖子

类型六：创建多个 table 并且绑定数据会出现报错：`gc.spread.sheets.all.14.0.2.min.js:71 Uncaught Error: 不允许此操作，因为它会移动工作表上表格中的单元格。`

因为 SpreadJS 中绑定数据源的 table 会因为数据的行数和列数不同而动态更改 table 的尺寸，当存在多个 table 时，可能上方的 table 会影响下方的 table 的单元格的位置，因此应该通过 table 的 expandBoundRows 为 true，如此一来当 table 因为数据源的行数增加时，sheet 行数也会随之增加，如此一来就不会影响到下方的 table 了