将自动合并效果导出Excel

问题：自动合并的单元格，如何在导出EXCEL文件后仍然合并？

背景：

SpreadJS有一个功能：如果相邻列单元格包含相同的文本并且它们不在任何已合并区域内，则允许相邻单元格自动合并。这个功能优化了用户需要一个一个遍历合并单元格的问题。但是随之带来一个新的问题，即导出excel文件后，发现自动合并的单元格此时被拆分。所以下文将围绕此背景展开解决方案。

解决方案：

我们的SpreadJS支持任何单元格区域的自动合并。如果行和列中的相邻单元格的文本相同并且不在任何合并单元格内容，则它们将自动合并，参考这里的方法，将单元格设置为自动合并

var sheet = spread.getActiveSheet();
var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row);

效果如图所示：

==========>

但是如果将上述的内容直接导出成Excel文件，会发现这两个单元格并没有合并

该效果只是画法显示层面的合并，实际上单元格之间并没有进行合并。所以在导出的时候并不会按照展示的效果进行单元格合并。在老版本中，如果场景中需要在导出时候也需要有自动合并的效果，AutoMerge是无法满足的，那么就需要我们自己来设计一套自动合并的算法，并利用单元格合并(addSpan)的功能来进行合并。这样可以确保导出Excel时也可以带有合并的效果。

新版本：

SpreadJS新版本已经支持通过选项让导出的文件实现AutoMerge的功能，如下所示：

spread.toJSON({ includeAutoMergedCells: true });

老版本：

首先，我们参考AutoMerge功能的设计分为四种合并方向：按行(byRow)，按列(byColumn)，先按行再按列(byRowColumn)，先按列再按行(byColumnRow)。

接下来，设计自动合并方式的算法，考虑到byRowColumn，byColumnRow这两种组合合并的方式是基于byRow，byColumn的基础上完成的，所以我们需要先设计byRow，byColumn的算法,主要通过循环来进行判断，下面附上算法的逻辑

1. 按照行进行合并

// 按照行合并
function spanbyrow(range){
    var spans = [];
    for(var i=range.row;i<range.rowCount;i++){
        var colCount = 1;var col = 0;
        var startValue = sheet.getValue(i,0);
        for(var j=range.col+1;j<range.colCount;j++){
            var currentValue = sheet.getValue(i,j);
            if(currentValue==startValue){
                colCount++;        
            }else{
                sheet.addSpan(i,col,1,colCount);
                var spanRange = new GC.Spread.Sheets.Range(i,col,1,colCount);
                spans.push(spanRange);
                startValue = currentValue;
                col = j;
                colCount = 1;
            }
            //判断是否到达边界
            if(j == range.col+range.colCount-1){
                sheet.addSpan(i,col,1,colCount);
                var spanRange = new GC.Spread.Sheets.Range(i,col,1,colCount);
                spans.push(spanRange);
            }
        }
    }
    return spans;
}

2. 按照列进行合并

  function spanbycolumn(range){
      var spans = [];
      for(var i=range.col;i<range.col+range.colCount;i++){
          var rowCount = 1;var row = 0;
          var startValue = sheet.getValue(0,i);
          for(var j=range.row+1;j<range.row+range.rowCount;j++){
              var currentValue = sheet.getValue(j,i);
              if(currentValue==startValue){
                   rowCount++;
              }else{
                   sheet.addSpan(row,i,rowCount,1);
                   var spanRange = new GC.Spread.Sheets.Range(row,i,rowCount,1);
                   spans.push(spanRange);
                   startValue = currentValue;
                   row = j;
                   rowCount = 1;
              }
              //判断是否到达边界
              if(j == range.row+range.rowCount-1){
                  sheet.addSpan(row,i,rowCount,1);
                  var spanRange = new GC.Spread.Sheets.Range(row,i,rowCount,1);
                  spans.push(spanRange);
              }
          }
      }
      return spans;
  }

3. 在按照行合并的基础上再按照列进行合并

  function spanbyrowcolumn(range){
      var spans = spanbyrow(range);
      for(var i=0;i<spans.length;i++){
          var row = spans[i].row;
          var col = spans[i].col;
          var rowCount = spans[i].rowCount;
          var colCount = spans[i].colCount;
          var sourceValue = sheet.getValue(spans[i].row,spans[i].col);
          var spanRowCount = rowCount;
          for(var j=spans[i].row+spans[i].rowCount;j<range.row+range.rowCount;j++){
              var spanFlag = true;
              for(var k=spans[i].col;k<spans[i].col+spans[i].colCount;k++){
                  var tempSpan = findSpan(j,k);
                  if(tempSpan && tempSpan.colCount != colCount){
                      spanFlag = false;
                      break;
                  }
                  if(sourceValue!=sheet.getValue(j,k)){
                      spanFlag = false;
                      break;
                  }
              }
              if(spanFlag){
                  spanRowCount++
                  sheet.removeSpan(j,col);
              }else{
                  break;
              }
          }
          if(spanRowCount>1){
              var compareSpan = findSpan(row,col);
              var currentSpan = new GC.Spread.Sheets.Range(row,col,spanRowCount,colCount);
              if(compareSpan !=null){
                  if(!containSpan(currentSpan,compareSpan)){
                      sheet.removeSpan(row,col);
                      sheet.addSpan(row,col,spanRowCount,colCount);
                  }
              }else{
                  sheet.removeSpan(row,col);
                  sheet.addSpan(row,col,spanRowCount,colCount);
              }
          }
      }
}

这里还需要一些对特殊情况的判断，例如在做列合并的时候上下两列如果都是合并单元格的处理方式，边界的判断等

4. 在按照列合并的基础上再按照行进行合并

function spanbycolumnrow(range){
    var spans = spanbycolumn(range);
    for(var i=0;i<spans.length;i++){
        var row = spans[i].row;
        var col = spans[i].col;
        var rowCount = spans[i].rowCount;
        var colCount = spans[i].colCount;
        var sourceValue = sheet.getValue(spans[i].row,spans[i].col);
        var spanColCount = colCount;
        for(var j=spans[i].col+spans[i].colCount;j<range.col+range.colCount;j++){
            var spanFlag = true;
            for(var k=spans[i].row;k<spans[i].row+spans[i].rowCount;k++){
                var currentValue = sheet.getValue(k,j);
                if(sourceValue!=sheet.getValue(k,j)){
                    spanFlag = false;
                    break;
                }
            }
            if(spanFlag){
                spanColCount++
                sheet.removeSpan(row,j);
            }else{
                break;
            }
        }

以上就是4种合并方式的讲解，具体可以参考这两篇技术博客

如何在导出Excel时带有自动合并(AutoMerge)效果(一)

如何在导出Excel时带有自动合并(AutoMerge)效果(二)

作者: Clark.Pan | 审核：Clark.Pan | 更新时间：2023.09.27