Pupeteer生成pdf会渲染带有间隙的表格

如何解决Pupeteer生成pdf会渲染带有间隙的表格

我正在使用Node Puppeteer使用Chrome Headless从网页生成PDF。它确实很好用，除了一个小问题之外，我遇到的问题是，如果一个表跨越一个以上的页面，有时其中一行将显得比预期的要大，而带有文本的日期列将出现在该行的顶部。 / p>

这是它在浏览器中的外观

这是在pdf上呈现的方式（出于保密目的，某些部分已模糊化）

正如您在PDF视图第二页的创建列上看到的那样，第一行中的日期和时间被扭曲了。 html版本中的该行没有什么异常之处。

该表遵循此结构；

<table>
    <thead>
        <tr>
            <th>Project</th>
            <th>Status</th>
            <th>Creator</th>
            <th>Created</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>Project Name</div>
                <div>Reference</div>
            </td>
            <td>
                <img src="status.png" alt="Some Stagus"> Some Status
            </td>
            <td>
                <div class="avatar"></div>
            </td>
            <td>
                <div>29/10/2020</div>
                <div>10:00:00</div>
            </td>
        </tr>
    </tbody>
</table>

我不确定这是否是chrome headless的错误，当我在chrome中打印预览时显示的问题与生成的pdf相同。任何建议或指示都将受到欢迎。

解决方法

这听起来很愚蠢，我讨厌这个答案......但它对我有用。

在正常行之间添加一个虚拟行。就像是 ... <tr style="height: 0px; !important"></tr>

您会注意到断行的高度为 2 倍。我猜当一行的第一个像素完全落在分页符上时会触发该问题，然后渲染器尝试添加该行两次，一次在上一页，一次在当前页。但由于它不适合上一页，它会在当前页面上翻滚并翻倍。 （纯属猜测）

鉴于此假设，在每个正常行之间添加一个没有高度的虚拟行可以让您通过将虚拟行作为错误的目标来隐藏此问题。我假设因为它的高度为 0，所以它总是可以挤在上一页而不会溢出和/或它确实溢出并加倍，但由于它的高度为 0，所以没关系。

无论如何，要想找到一个黑客修复程序是一场噩梦。它对我有用，我真的希望它对你有用，我希望 puppeteer 有朝一日发布一个更新，以改进分页逻辑。