如何将DataTables中<sup>标签内容转为Excel上标样式？

问题描述 #

我的DataTables表格中存在包含<sup>标签的单元格，示例为<td>System Architect<sup>5</sup></td>。使用button/excelHtml5按钮导出Excel文件时，需要将<sup>标签包裹的内容转换为Excel原生的上标样式。当前使用的导出逻辑代码如下，请问如何实现该需求？

customize: function(xlsx) {
      var sheet = xlsx.xl['styles.xml'];
      var tagName = sheet.getElementsByTagName('sz');
      for (i = 0; i < tagName.length; i++) {
        tagName[i].setAttribute("superscript", "55")
      }
      console.log(tagName)
    }

解决方案 #

直接给所有字体标签添加上标属性会导致整单元格文本都变成上标，我们需要针对<sup>包裹的内容单独设置样式，具体实现如下：

修改后的导出定制函数 #

customize: function(xlsx) {
  // 1. 在Excel样式表中新增上标样式
  var stylesXml = xlsx.xl['styles.xml'];
  var fonts = stylesXml.getElementsByTagName('fonts')[0];
  var cellXfs = stylesXml.getElementsByTagName('cellXfs')[0];

  // 克隆基础字体并设置上标属性
  var baseFont = fonts.getElementsByTagName('font')[0];
  var supFont = baseFont.cloneNode(true);
  var szTag = supFont.getElementsByTagName('sz')[0];
  szTag.setAttribute('superscript', '1'); // 1代表上标，2代表下标
  fonts.appendChild(supFont);
  var supFontId = fonts.getElementsByTagName('font').length - 1;

  // 克隆基础单元格格式并关联上标字体
  var baseXf = cellXfs.getElementsByTagName('xf')[0];
  var supXf = baseXf.cloneNode(true);
  supXf.setAttribute('fontId', supFontId);
  supXf.setAttribute('applyFont', '1');
  cellXfs.appendChild(supXf);
  var supStyleId = cellXfs.getElementsByTagName('xf').length - 1;

  // 2. 遍历工作表，处理带<sup>标签的单元格
  var sheetXml = xlsx.xl['worksheets/sheet1.xml'];
  var rows = sheetXml.getElementsByTagName('row');

  for (let r = 0; r < rows.length; r++) {
    var cells = rows[r].getElementsByTagName('c');
    for (let c = 0; c < cells.length; c++) {
      var cell = cells[c];
      var valueNode = cell.getElementsByTagName('v')[0];
      if (!valueNode) continue;

      var cellValue = valueNode.textContent;
      if (!cellValue.includes('<sup>')) continue;

      // 拆分文本为普通部分和上标部分
      var textParts = cellValue.split(/<sup>(.*?)<\/sup>/);
      if (textParts.length < 3) continue;

      // 清空原有单元格内容
      while (cell.firstChild) {
        cell.removeChild(cell.firstChild);
      }

      // 添加普通文本片段
      var normalTextNode = document.createElement('t');
      normalTextNode.textContent = textParts[0];
      cell.appendChild(normalTextNode);

      // 添加带样式的上标文本片段
      var runNode = document.createElement('r');
      var runPrNode = document.createElement('rPr');
      var styleIndexNode = document.createElement('si');
      styleIndexNode.setAttribute('val', supStyleId);
      runPrNode.appendChild(styleIndexNode);
      runNode.appendChild(runPrNode);

      var supTextNode = document.createElement('t');
      supTextNode.textContent = textParts[1];
      runNode.appendChild(supTextNode);
      cell.appendChild(runNode);

      // 添加剩余的普通文本（如果有）
      if (textParts[2]) {
        var restTextNode = document.createElement('t');
        restTextNode.textContent = textParts[2];
        cell.appendChild(restTextNode);
      }
    }
  }
}

关键说明 #

• 上标属性规则：Excel的sz标签中，superscript="1"对应上标效果，"2"对应下标效果。
• 样式创建逻辑：通过克隆现有字体和单元格格式，修改后添加到样式表，确保新样式能被单元格正确引用。
• 文本拆分重组：利用正则拆分<sup>标签分割的文本，将不同部分分别添加到单元格，仅给上标内容应用专属样式。

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