DataTables导出PDF时如何正确渲染Unicode星号字形？

我明白你遇到的问题了——用DataTables做游泳队的最佳时间表格，网页上用空心星（U+2606，对应B级达标）和实心星（U+2605，对应A级达标）标注得好好的，结果导出PDF就看不到这些星号了，确实挺闹心的。

你查到的原因完全正确：pdfMake默认使用的Roboto字体不包含这些Unicode星号字形，所以得手动引入一个支持这类字符的字体，比如Arial Unicode MS或者Noto Sans这类覆盖全字符集的字体，具体操作步骤我给你理得明明白白：

• 第一步：准备字体的Base64编码
  先找一个支持U+2605和U+2606的.ttf格式字体文件，用在线Base64编码工具把它转换成Base64字符串。

• 第二步：修改vfs_fonts.js文件
  找到DataTables导出插件依赖的vfs_fonts.js文件，打开后会看到默认字体的Base64配置结构：

  window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs = {
    "Roboto-Italic.ttf": "默认字体的Base64字符串",
    // 其他默认字体项...
  };
  

  把你生成的新字体Base64字符串添加进去，比如：

  "ArialUnicodeMS.ttf": "你生成的Base64字符串"
  

• 第三步：配置DataTables导出时使用新字体
  在DataTables的初始化代码里，给PDF导出按钮添加自定义配置，指定使用新字体：

  $('#your-swim-table').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'pdf',
        customize: function(doc) {
          // 注册新字体
          doc.fonts = {
            ArialUnicodeMS: {
              normal: 'ArialUnicodeMS.ttf',
              bold: 'ArialUnicodeMS.ttf', // 如果有对应粗体字体可以替换
              italics: 'ArialUnicodeMS.ttf',
              bolditalics: 'ArialUnicodeMS.ttf'
            }
          };
          // 设置全局默认字体
          doc.defaultStyle.font = 'ArialUnicodeMS';
          // 确保表格内容也使用新字体
          if (doc.content[1].table) {
            doc.content[1].table.body.forEach(row => {
              row.forEach(cell => {
                cell.font = 'ArialUnicodeMS';
              });
            });
          }
        }
      }
    ]
  });
  

• 第四步：测试导出效果
  保存所有修改后刷新页面，再尝试导出PDF，这时候空心星和实心星应该就能正常显示了。

另外还有个应急小技巧：如果不想折腾字体文件，也可以试试把Unicode星号替换成pdfMake支持的内置图标，但这个方法没法保证和网页上的显示完全一致，还是推荐上面的自定义字体方案更靠谱。

备注：内容来源于stack exchange，提问作者Eddie Rowe