使用jQuery的DataTable插件实现Excel导出表头样式设置

要实现导出Excel时自定义表头样式，你需要利用DataTables Buttons扩展的customize回调函数，直接操作Excel工作簿对象修改样式。以下是完整实现步骤：

前提条件 #

确保已引入以下依赖：

• DataTables核心库
• DataTables Buttons扩展
• JSZip（Excel导出必备）
• Html5导出模块

配置代码示例 #

$('#your-table-id').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      text: '导出Excel',
      customize: function(xlsx) {
        // 获取导出的工作表对象
        const sheet = xlsx.xl.worksheets['sheet1.xml'];
        // 定位表头行（DataTables导出的表头默认是第一行）
        const headerRow = $('row:first', sheet);

        // 遍历表头所有单元格，设置样式
        $('c', headerRow).each(function() {
          // 插入自定义字体样式（白色、14号字）
          if (!$('fonts font[sz="14"]', xlsx.xl.styles.xml).length) {
            $('fonts', xlsx.xl.styles.xml).append(`
              <font>
                <sz val="14"/>
                <color rgb="FFFFFF"/>
                <name val="Calibri"/>
                <family val="2"/>
                <scheme val="minor"/>
              </font>
            `);
          }

          // 插入自定义填充样式（深蓝色背景）
          if (!$('fills fill[patternFill/fgColor/@rgb="003366"]', xlsx.xl.styles.xml).length) {
            $('fills', xlsx.xl.styles.xml).append(`
              <fill>
                <patternFill patternType="solid">
                  <fgColor rgb="003366"/>
                  <bgColor indexed="64"/>
                </patternFill>
              </fill>
            `);
          }

          // 插入自定义对齐样式（右上对齐）
          if (!$('cellXfs xf[alignment/@horizontal="right"]', xlsx.xl.styles.xml).length) {
            $('cellXfs', xlsx.xl.styles.xml).append(`
              <xf numFmtId="0" fontId="1" fillId="1" borderId="0" xfId="0" applyFont="1" applyFill="1" applyAlignment="1">
                <alignment horizontal="right" vertical="top"/>
              </xf>
            `);
          }

          // 将表头单元格关联到新样式（索引从1开始）
          $(this).attr('s', '1');
        });
      }
    }
  ]
});

关键部分说明 #

• customize回调：生成Excel文件前触发，通过参数xlsx直接操作Excel的XML结构，实现深度样式定制。
• 样式定义细节：
  • 背景色：用RGB值003366设置深蓝色纯色填充
  • 字体：指定字号14、白色字体（RGBFFFFFF）
  • 对齐：通过horizontal="right"+vertical="top"实现右上对齐效果
• 样式索引：Excel通过索引引用样式，新增的自定义样式索引为1（默认基础样式索引为0），因此将表头单元格的s属性设为1来应用样式。

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