使用html-to-pdf GitHub Action时勾选标记无法显示的解决问询

通过Node.js脚本生成包含表格的HTML文件，表格单元格中根据条件使用\u2714（显示为✔）作为勾选标记，该标记在网页中显示正常，但使用fifsky/html-to-pdf-action将HTML转换为PDF时，勾选标记缺失。

相关代码如下：

生成勾选标记的Node.js代码片段 #

<td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>" + "Passed \u2714" + "</td>

GitHub Action转换代码 #

- name: Convert HTML to PDF report
  if: always()
  uses: fifsky/html-to-pdf-action@master
  with:
    htmlFile: results.html
    outputFile: AntmanPerformanceReport.pdf
    pdfOptions: '{"format": "A4", "margin": {"top": "10mm", "left": "10mm", "right": "10mm", "bottom": "10mm"}, "landscape": true, "printBackground": true}'

HTML示例片段 #

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
  <h2 style='color:purple;text-align: center;'>Processing Performance Testing Report</h2><br>
  <!-- 省略部分表格代码 -->
  <tr>
    <td style='font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;padding: 15px;'> Gateway </td>
    <td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>✔</td>
    <td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>✔</td>
  </tr>
  <!-- 省略其他行代码 -->
</body>

1. 换用支持特殊字符的字体 #

Tahoma字体在PDF渲染环境里可能没包含\u2714的字形，这是核心问题。你可以给单元格的字体列表里添加支持特殊符号的字体，比如Segoe UI Symbol、Arial Unicode MS，用系统无衬线字体兜底：

修改单元格样式：

<td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:"Segoe UI Symbol", "Arial Unicode MS", Tahoma, sans-serif;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>Passed \u2714</td>

嫌逐个改麻烦的话，直接在HTML头部加全局样式：

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <style>
    td {
      font-family: "Segoe UI Symbol", "Arial Unicode MS", Tahoma, sans-serif;
    }
  </style>
</head>

2. 用HTML实体替代Unicode转义 #

把Node.js里的\u2714换成HTML实体✔或者✔，这样渲染时更不容易出问题：

修改生成代码：

<td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>" + "Passed &#10004;" + "</td>

3. 改用SVG图标代替文本字符 #

如果字体方案不管用，直接用SVG做勾选标记，保证任何环境都能显示：

<td style='text-align: center;background-color:#93C572;border-radius: 10px;font-family:Tahoma;font-size:14px;border-bottom: thin solid;border-color:#DEDEDE;border-width: 2px 10px;'>
  Passed <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
    <path d="M20 6L9 17L4 12"/>
  </svg>
</td>

4. 在GitHub Action中安装缺失字体 #

GitHub Action默认环境可能缺少支持特殊字符的字体，你可以先安装字体再转PDF：

在转换步骤前加安装命令：

- name: Install fonts
  run: sudo apt-get install -y fonts-noto-color-emoji fonts-symbola

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