如何在DataTables导出Excel时将首列（A列）文本顶端对齐

我是一名新手程序员，在使用DataTables导出Excel表格时，希望将A列文本设置为顶端对齐。目前导出的A列文本未实现该效果，期望达到Excel原生顶端对齐的样式（对应Excel中的顶端对齐设置功能）。

以下是我当前使用的导出代码：

{
  extend: 'excelHtml5',
  footer: true,
  text: 'Save as Excel',
  pageSize: 'A4',
  title:'shop',
  filename:'shop',
  
  customize: function (xlsx) {
    var sheet = xlsx.xl.worksheets['sheet1.xml'];
    var style = xlsx.xl['styles.xml'];
               
    var tagName = style.getElementsByTagName('sz');
    
    $('row c[r^="A"]', sheet).attr( 's', '2' );
    $('row c[r^="B"]', sheet).attr( 's', '55' );
    $('row[r=2] c', sheet).attr( 's', '32' );
    $('row[r=1] c', sheet).attr( 's', '51' );

    $('xf', style).find("alignment[horizontal='center']").attr("wrapText", "1");

    $('row', sheet).first().attr('ht', '40').attr('customHeight', "1");
    
    var col = $('col', sheet);
    $(col[0]).attr('width', 8);
    $(col[1]).attr('width', 25);
    $(col[2]).attr('width', 8);
    $(col[3]).attr('width', 9);
    $(col[4]).attr('width', 7);
    $(col[5]).attr('width', 6);
    $(col[6]).attr('width', 7);
    $(col[7]).attr('width', 8);
    $(col[8]).attr('width', 8);
    $('row ', sheet).each(function (index) {
      if (index > 0) {
        $(this).attr('ht', 32);
        $(this).attr('customHeight', 1);
      }
    });
    
    var ranges = buildRanges(sheet);
    ranges.push( "A1:I1" );
    
    // build the HTML string:
    var mergeCellsHtml = '<mergeCells count="' + ranges.length + '">';
    ranges.forEach(function(range) {
      mergeCellsHtml = mergeCellsHtml + '<mergeCell ref="' + range + '"/>';
    })
    mergeCellsHtml = mergeCellsHtml + '</mergeCells>';

    $( 'sheetData', sheet ).after( mergeCellsHtml );
    // don't know why, but Excel auto-adds an extra mergeCells tag, so remove it:
    $( 'mergeCells', sheet ).last().remove(); 
  },
  exportOptions: {
    columns: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    
    rows: function (idx, data, node) {
      return data[6] + data[7] > 0 ?
        true : false;
    }
  }
}

function buildRanges(sheet) {
  let prevCat = ''; // previous category
  let currCat = ''; // current category
  let currCellRef = ''; // current cell reference
  let rows = $('row', sheet);
  let startRange = '';
  let endRange = '';
  let ranges = [];

  rows.each(function (i) {
    if (i > 0 && i < rows.length) { // skip first (headings) row
      let cols = $('c', $(this));
      cols.each(function (j) {
        if (j == 0) { // the "Category" column
          currCat = $(this).text(); // current row's category
          currCellRef = $(this).attr('r'); // e.g. "B3"
          if (currCat !== prevCat) {
            if (i == 0) {
              // start of first range
              startRange = currCellRef;
              endRange = currCellRef;
              prevCat = currCat;
            } else {
              // end of previous range
              if (endRange !== startRange) {
                // capture the range:
                ranges.push( startRange + ':' + endRange );
              }
               // start of a new range
              startRange = currCellRef;
              endRange = currCellRef;
              prevCat = currCat;
            }
          } else {
            // extend the current range end:
            endRange = currCellRef;
          }
        }
      });
      if (i == rows.length -1 && endRange !== startRange) {
        // capture the final range:
        ranges.push( startRange + ':' + endRange );
      }
    }
  });
  return ranges;
}

要实现A列文本顶端对齐，需在Excel导出的customize回调中修改对应样式的垂直对齐属性，具体操作如下：

方法一：针对A列使用的样式修改 #

你给A列单元格设置的样式ID是2（$('row c[r^="A"]', sheet).attr( 's', '2' )），直接找到该样式并设置垂直顶端对齐：
在customize函数中，添加以下代码（放在设置样式ID的代码之后）：

// 给样式ID为2的格式设置垂直顶端对齐
$('xf', style).eq(2).find('alignment').attr('vertical', 'top');

方法二：全局设置垂直对齐（如果需要多列生效） #

如果希望所有单元格都默认顶端对齐，或者不确定样式索引，可遍历所有样式节点修改：

// 遍历所有样式节点，设置垂直顶端对齐
$('xf', style).each(function() {
  var alignNode = $(this).find('alignment');
  if (alignNode.length) {
    alignNode.attr('vertical', 'top');
  } else {
    // 若样式无对齐节点，添加新的对齐设置
    $(this).append('<alignment vertical="top"/>');
  }
});

修改后的完整customize函数示例 #

customize: function (xlsx) {
  var sheet = xlsx.xl.worksheets['sheet1.xml'];
  var style = xlsx.xl['styles.xml'];
               
  var tagName = style.getElementsByTagName('sz');
  
  $('row c[r^="A"]', sheet).attr( 's', '2' );
  $('row c[r^="B"]', sheet).attr( 's', '55' );
  $('row[r=2] c', sheet).attr( 's', '32' );
  $('row[r=1] c', sheet).attr( 's', '51' );

  // 添加这行代码设置A列样式的垂直顶端对齐
  $('xf', style).eq(2).find('alignment').attr('vertical', 'top');

  $('xf', style).find("alignment[horizontal='center']").attr("wrapText", "1");

  $('row', sheet).first().attr('ht', '40').attr('customHeight', "1");
  
  // 其余原有代码保持不变...
}

这样修改后，导出的Excel中A列文本就会实现顶端对齐效果。

内容的提问来源于stack exchange，提问作者gopal