2

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.

Improve this question
2
  • The structure you have provided doesn't match the screenshots of the table. The image in the first column missing from the structure, but this is all not important at all. Important to have entire HTML (with CSS classes you are using) and CSS itself. Now, even if you provide with this code, who is going to debug it and understand what style is causing it or which style has to be added? As you requested, the suggestion is to look at the styles you are using and try to make table row height fixed. Debugging is on you. Commented Oct 29, 2020 at 18:11
  • I think the above comment is missing the point. Even with minimal html/css, this issue can appear. The point is there's nothing in his code directly triggering that row to have a deformed height and/or vertical alignment. This issue appears only on the first row after a page break with a repeating header, but I'm unsure what triggers it. PDF generators often have odd issues like this, and the solution is usually something hacky, like adding some nonsense css which somehow tricks the renderer into displaying the html correctly. Like say tr { min-height: 100% !important } Commented May 28, 2021 at 12:58

1 Answer 1

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.