Pupeteer to generate pdf is rendering tables with gaps

user_301593 0
Viewed 636

I'm using Node Puppeteer to generate a PDF from a webpage using Chrome Headless. It works really well, apart from a small issue I'm coming across where if a table spans over more than one page sometimes one of the rows will appear larger than expected and the date column having text appear at the top of the row.

This is how it looks in the browser

Browser view

This is how it is rendered on the pdf (some parts are blurred for confidentiality)

PDF rendered view

As you can see on the created column on the second page in the PDF view the date and time in the first row are distorted. There is nothing unusual about that row in the html version.

The table follows this structure;

<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>

I'm not sure if this is a bug with chrome headless, when I print preview in chrome is shows the same issue as the generated pdf. Any suggestions or pointers would be very welcome.

google-chrome-headless puppeteer node.js pdf-generation pdf
1 Answers

This is going to sound stupid, and I hate this answer... but it worked for me.

Add a dummy row in between your normal rows. Something like ... <tr style="height: 0px; !important"></tr>

You'll notice that the broken row has 2x height. I'm guessing the issue is triggered when the first pixel of a row lands EXACTLY on a page break, and then the renderer attempts to add the row twice, once on the previous page and once on the current page. But since it doesn't fit on the previous page, it rolls over and doubles up on the current page. ( PURELY SPECULATION )

Given this hypothesis, adding a dummy row with no height between every normal row lets you hide this issue by having the dummy row be the target of the bug. I'm assuming that since its height it 0, it can always squeeze in on the previous page without overflowing and/or it does overflow and get doubled, but since its height is 0 it doesn't matter.

Anyways, this was a nightmare to figure out a hack-fix. It worked for me, I truly hope it works for you, and I hope puppeteer releases an update one day that improves on page-break logic.

user_113188640
Related