如何消除html2pdf导出PDF时rowspan造成的表格线条？

问题描述 #

使用html2pdf导出带有rowspan和colspan属性的表格时，colspan功能正常，但rowspan对应的<td>元素之间会出现多余线条，需修改代码移除这些线条。

表格代码 #

<tr>
  <td style="letter-spacing:0.2px;font-size: 10px;" width="10%" rowspan="2" class="p-2 text-center fw-bold"> Test </td>
  <td style="letter-spacing:0.2px;font-size: 10px;" width="10%" colspan="2" class="p-2 text-center fw-bold">yes / no</td>
</tr>
<tr>
  <td style="letter-spacing:0.2px;font-size: 10px;" class="p-2 text-center fw-bold">Yes</td>
  <td style="letter-spacing:0.2px;font-size: 10px;" class="p-2 text-center fw-bold">No</td>
</tr>

html2pdf配置代码 #

var opt = {
  margin: [30, 10],
  filename: 'exported.pdf',
  image: {
    type: 'jpeg',
    quality: 0.98
  },
  html2canvas: {
    scale: 2,
    scrollX: 0,
    scrollY: 0,
    useCORS: true,
    dpi: 96,
    letterRendering: true
  },
  jsPDF: {
    unit: 'mm',
    format: 'a4',
    orientation: 'portrait'
  },
  pagebreak: {
    mode: ['avoid-all'],
  }
};

解决方案 #

1. 手动控制表格边框样式 #

给表格添加CSS规则，明确控制rowspan相关单元格的边框，避免渲染冲突：

/* 确保表格边框合并，消除间距 */
table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 给跨两行的单元格去掉底部边框 */
td[rowspan="2"] {
  border-bottom: none !important;
}

/* 给下方对应行的单元格去掉顶部边框 */
tr:nth-child(2) td {
  border-top: none !important;
}

将这段CSS添加到页面的<style>标签中，或者通过类名绑定到目标表格。

2. 优化html2canvas渲染配置 #

调整html2canvas的参数，提升渲染精度并强制使用CSS样式解析：

var opt = {
  // 其他配置不变
  html2canvas: {
    scale: 3, // 提高缩放比例，减少精度误差
    scrollX: 0,
    scrollY: 0,
    useCORS: true,
    dpi: 192, // 提升DPI，增强渲染清晰度
    letterRendering: true,
    useCSS: true, // 强制使用CSS样式渲染边框
    logging: false
  },
  // 其他配置不变
};

更高的scale和dpi能减少低精度渲染导致的多余线条，开启useCSS可让html2canvas更准确地解析表格边框规则。

3. 覆盖框架默认边框（若使用UI框架） #

如果页面使用了Bootstrap等带默认表格样式的框架，需自定义类覆盖默认边框：

<!-- 给表格添加自定义类 -->
<table class="custom-export-table">
  <!-- 表格内容 -->
</table>

.custom-export-table td {
  border: 1px solid #000 !important;
}
.custom-export-table td[rowspan="2"] {
  border-bottom: none !important;
}
.custom-export-table tr:nth-child(2) td {
  border-top: none !important;
}

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