Datatables导出PDF遇问题：图标不显示+自定义函数报错

你的Datatables PDF导出代码 #

{
  extend: 'pdf',
  text: 'pdf',
  title: 'Registo de Marcações',
  footer: true,
  exportOptions: {
    stripHtml : false,
    columns: function ( idx, data, node ) {
      if (idx >= 4) {
        return data;
      }
    }
  },
  customize: function ( win ) {
    $(win.document.body)
    .css( 'font-size', '10pt' );
  
    $(win.document.body).find( 'table' )
    .addClass( 'compact' )
    .css( 'font-size', 'inherit' );
  }
}

问题1：Font Awesome图标导出PDF显示代码文本的解决方法 #

Datatables的PDF导出依赖jsPDF，它无法直接解析渲染Font Awesome的HTML标签（比如<i class="fa fa-check"></i>），但打印是浏览器原生处理，所以能正常显示图标。给你两个可行方案：

方案一：用Unicode字符替换图标HTML #

Font Awesome每个图标都对应唯一的Unicode编码，你可以在导出时把图标标签替换成对应字符：

exportOptions: {
  stripHtml: false,
  columns: function(idx, data, node) {
    if (idx >= 4) {
      // 替换fa-check图标为对应Unicode
      data = data.replace('<i class="fa fa-check"></i>', '&#xf00c;');
      // 替换fa-times图标为对应Unicode
      data = data.replace('<i class="fa fa-times"></i>', '&#xf00d;');
      // 其他图标同理替换，Unicode可在Font Awesome官网查询
      return data;
    }
  }
},
customize: function(win) {
  // 注入Font Awesome字体（需先将ttf字体转成base64格式）
  win.addFont('FontAwesome', 'FontAwesome', 'normal');
  win.setFont('FontAwesome');
  // 其他样式设置...
}

方案二：将图标转为图片（适合复杂场景） #

如果图标样式多，可提前把页面上的Font Awesome图标转为Canvas图片，导出时用图片替代图标标签。需要在Datatables初始化前遍历图标元素，通过Canvas绘制生成图片地址替换原标签。

问题2：$(win.document.body)报错的解决方法 #

PDF导出的customize函数里的win是jsPDF实例，不是浏览器window对象，所以没有document.body属性；而打印功能的win是浏览器弹出的打印窗口，因此能正常访问该属性。

修改customize函数，直接操作jsPDF的内容结构：

customize: function(win) {
  // 设置全局字体大小
  win.setFontSize(10);
  
  // 获取并修改导出的HTML内容，添加表格样式
  let content = win.getContent();
  content = content.replace('<table', '<table class="compact" style="font-size:inherit;"');
  win.setContent(content);
}

如果习惯用jQuery操作DOM，也可以先把内容转为临时DOM对象处理：

customize: function(win) {
  let tempDiv = $('<div></div>').html(win.getContent());
  tempDiv.css('font-size', '10pt');
  tempDiv.find('table').addClass('compact').css('font-size', 'inherit');
  win.setContent(tempDiv.html());
}

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