我懂你想给DataTable的打印内容加些复杂的自定义区块，不管是表格上方的页眉还是下方的页脚，之前那种简单的文本配置肯定满足不了需求对吧？试试用打印按钮的customize回调函数，这是最灵活的实现方式，能搞定任意复杂的HTML结构：

1. 添加复杂自定义页眉（表格上方） #

通过customize回调直接操作打印窗口的DOM，插入你需要的任意HTML结构，包括嵌套div、自定义样式都没问题：

$('#your-table-id').DataTable({
  dom: 'Bfrtip', // 确保包含按钮容器
  buttons: [
    {
      extend: 'print',
      customize: function(win) {
        // 定义复杂的页眉HTML，这里可以根据你的需求任意修改
        const customHeader = `
          <div style="margin-bottom: 25px; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">
            <h3 style="margin: 0 0 10px 0;">销售数据报表</h3>
            <div style="font-size: 14px; display: flex; justify-content: space-between;">
              <span>日期范围：<strong>2024-01-01 至 2024-01-31</strong></span>
              <span>生成人：<strong>张三</strong></span>
            </div>
            <p style="font-size: 12px; color: #666; margin-top: 8px;">本报表为内部统计数据，请勿外传</p>
          </div>
        `;
        
        // 将页眉插入到打印内容里的表格前面
        $(win.document.body).find('table').before(customHeader);
        
        // 可选：统一打印内容的字体样式
        $(win.document.body).css('font-family', 'Arial, sans-serif');
      }
    }
  ]
});

2. 添加自定义页脚（表格下方） #

和页眉的思路一样，只是把插入位置改成表格后面：

customize: function(win) {
  const customFooter = `
    <div style="margin-top: 30px; padding-top: 15px; border-top: 2px solid #333; text-align: center;">
      <p style="font-size: 12px; margin: 0;">© 2024 你的公司名称 版权所有</p>
      <p style="font-size: 11px; color: #666; margin-top: 5px;">打印时间：${new Date().toLocaleString()}</p>
    </div>
  `;
  
  $(win.document.body).find('table').after(customFooter);
}

3. 解决打印的问题 #

如果之前设置footer: true没生效，先检查你的表格结构是否包含<tfoot>标签，然后在打印按钮配置里开启footer，还能通过customize调整页脚样式：

{
  extend: 'print',
  footer: true, // 开启表格原生页脚的打印
  customize: function(win) {
    // 给打印的页脚添加样式
    $(win.document.body).find('tfoot tr').css({
      'font-weight': 'bold',
      'background-color': '#f5f5f5'
    });
  }
}

注意事项 #

• 打印窗口的样式建议用内联样式（写在style属性里），因为打印时可能不会加载页面的外部CSS文件；
• 如果需要动态获取页面上的内容（比如用户选择的日期、输入的信息），可以直接在HTML字符串里插入变量，比如${$('#date-input').val()}；
• 可以同时添加页眉和页脚，把两段插入逻辑放在同一个customize函数里即可。

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