解决DataTables打印时Font Awesome图标不显示的问题

核心原因 #

DataTables的打印插件默认生成的打印预览页面不会自动引入Font Awesome的字体资源，导致图标无法正常渲染。

解决方案 #

方案1：在打印回调中注入Font Awesome样式

通过DataTables按钮的customize回调，在打印预览页面中添加Font Awesome的CSS引用，确保字体资源能被加载：

$('#your-table').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'print',
      customize: function(win) {
        // 注入本地Font Awesome CSS文件
        $(win.document.head).append('<link rel="stylesheet" href="path/to/font-awesome.min.css">');
        // 若使用CDN，替换为对应CDN地址
        // $(win.document.head).append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">');
      }
    }
  ]
});

方案2：用内联SVG替代字体图标

如果不想依赖外部字体文件，可将Font Awesome图标转换为内联SVG直接写入tfoot，打印时能直接渲染：
原本的图标代码：

<tfoot>
  <tr>
    <td><i class="fa-solid fa-exclamation-circle"></i> 重要说明</td>
  </tr>
</tfoot>

替换为内联SVG（可从Font Awesome官网复制对应图标代码）：

<tfoot>
  <tr>
    <td>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
      </svg> 重要说明
    </td>
  </tr>
</tfoot>

方案3：自定义打印样式强制生效

在页面CSS中添加打印媒体查询，确保图标样式在打印时正常加载：

@media print {
  .fa, .fas, .fa-solid {
    font-family: 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    /* 需根据本地Font Awesome字体文件路径调整 */
    src: url('../fonts/fa-solid-900.ttf') format('truetype');
  }
}

注意要保证Font Awesome字体文件在项目中可访问，路径配置正确。

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