使用wkhtmltopdf导出PDF时如何避免带rowspan的表格行内出现分页

问题原因 #

wkhtmltopdf对CSS分页属性的支持存在不少局限性，尤其是处理带rowspan的跨行表格时，原生的page-break系列属性只对独立块级元素生效的逻辑不适用，你当前的代码没有生效主要是缺少必要的结构规范和属性适配。

解决方案 #

1. 调整CSS规则

补充页面边距声明、给全表和所有行添加适配wkhtmltopdf的分页属性：

/* 明确页面边距，避免wkhtmltopdf分页计算偏差 */
@page {
    margin: 1cm;
}
thead {
    /* 如果不需要表头跨页重复可以删除此行，需要的话改成table-header-group */
    display: table-row-group;
}
table {
    word-wrap: break-word;
    page-break-inside: avoid;
    overflow: visible; /* 必须加，否则wkhtmltopdf会错误裁剪内容 */
    border-collapse: collapse;
}
table td {
    word-break: break-all;
    border: 1px solid black;
}
/* 给所有行添加避免截断属性，不要只给部分行加 */
tr {
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
}

2. 补全HTML表格结构

你当前的HTML缺少tbody标签包裹所有表格行，会导致wkhtmltopdf识别表格结构出错，修改后结构如下：

<body>
<table>
    <tbody>
    <!-- 原有的所有tr内容全部放在tbody标签内 -->
    <tr>
        <td rowspan=2>1</td><td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <!-- 剩余行按原有逻辑保留即可 -->
    </tbody>
</table>
</body>

3. 调整运行参数

执行wkhtmltopdf命令时添加--disable-smart-shrinking参数，关闭智能缩放功能，该功能是常见的分页错位诱因：
wkhtmltopdf --disable-smart-shrinking 输入.html 输出.pdf

额外适配建议

• 优先升级wkhtmltopdf到0.12.6及以上版本，旧版本对分页属性的支持存在大量已知bug
• 不要给表格或其父元素设置float、position: relative属性，会干扰分页位置计算
• 如果存在跨行高度特别大的行，建议手动拆分内容或者在合适位置强制添加分页标记：<div style="page-break-after: always;"></div>

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