mPDF5.6生成PDF时td的border-radius样式失效如何解决

问题复现代码 #

<table style="border-collapse: separate; border-spacing: 2px;">
    <tbody>
        <tr>
            <td style="border: 1px dotted black; border-radius: 5px;">Name</td>
            <td style="border: 1px dotted black; border-radius: 5px;">lastname</td>
        </tr>
        <tr>
            <td style="border: 1px dotted black; border-radius: 5px;">Name</td>
            <td style="border: 1px dotted black; border-radius: 5px;">lastname</td>
        </tr>
    </tbody>
</table>

上述代码在浏览器中渲染可以正常显示带点状圆角边框的表格效果，但传入mPDF 5.6生成PDF时，td上设置的圆角样式会完全消失。

问题原因 #

• mPDF 5.6属于非常老旧的版本，CSS3属性支持度极低，border-radius本身就不在该版本的表格元素样式支持列表内，引擎解析td样式时会直接过滤掉该属性。
• 该版本对表格单元格的边框渲染逻辑做了特殊硬编码处理，仅支持直角边框绘制，哪怕手动修改引擎的样式解析规则，也无法直接让td原生支持圆角边框。

解决方法 #

• 升级mPDF版本
  直接升级到mPDF 8.0及以上的稳定版本，新版引擎重构了CSS解析和绘制逻辑，原生支持表格单元格的border-radius属性，对dotted点状边框、border-spacing单元格间距的渲染效果和浏览器几乎一致，是最省心的解决方案。
• 嵌套div模拟圆角（无法升级版本时适用）
  不要直接给td设置边框和圆角，先清空td自带的内边距和边框，在td内部嵌套一层div，把边框、圆角、内边距属性都设置在div上。mPDF 5.6对普通块级元素div的border-radius支持度远高于表格单元格，可实现预期效果，调整后的代码如下：

  <table style="border-collapse: separate; border-spacing: 2px;">
      <tbody>
          <tr>
              <td style="padding: 0; border: none;">
                  <div style="border: 1px dotted black; border-radius: 5px; padding: 6px;">Name</div>
              </td>
              <td style="padding: 0; border: none;">
                  <div style="border: 1px dotted black; border-radius: 5px; padding: 6px;">lastname</div>
              </td>
          </tr>
          <tr>
              <td style="padding: 0; border: none;">
                  <div style="border: 1px dotted black; border-radius: 5px; padding: 6px;">Name</div>
              </td>
              <td style="padding: 0; border: none;">
                  <div style="border: 1px dotted black; border-radius: 5px; padding: 6px;">lastname</div>
              </td>
          </tr>
      </tbody>
  </table>
  

  实际使用时可以根据需求调整div的padding值，匹配原有的内容间距即可。
• 背景图模拟（固定样式场景适用）
  如果单元格内容长度固定、样式不需要动态调整，可以提前制作对应尺寸的点状圆角边框素材作为单元格背景图，铺满td来模拟圆角边框效果，该方案兼容性最好，但灵活度极低，不适合动态内容场景。

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