Menu
I'm trying to generate a pdf with Puppeteer chrome.
The data in the pdf is dynamic.
The pdf contain multiple tables that I generate by looping through the data.
So, there are two loops, looping the tables and looping the data (<td>) inside each table.
The header of the table - inside <thead> - has rowspan. Unfortunately, the <thead> is not breaking as I expected.
Here is the current situation:
expected result
What I expect is that the <thead> wouldn't break.
If the <thead> does not fit, it should go to the next page.
I created the template using handlebars.
Here is the code of the template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html,
body {
min-height: 150mm !important;
max-width: 297mm !important;
}
@page {
size: auto;
}
</style>
</head>
<body>
<div>
{{#each array as |data|}}
<table>
<thead style="page-break-inside: avoid !important">
<tr>
<th rowspan="2">
One
</th>
<th rowspan="2">
Two
</th>
<th colspan="2">
Three
</th>
<th rowspan="2">
Four
</th>
<th rowspan="2">
Five
</th>
<th colspan="2">
Six
</th>
<th colspan="2">
Seven
</th>
</tr>
<tr>
<th>
Three child 1
</th>
<th>
Three child 2
</th>
<th>
Six child 1
</th>
<th>
Six child 2
</th>
<th>
Seven child 1
</th>
<th>
Seven child 2
</th>
</tr>
</thead>
<tbody>
{{#each data.innerArray as |innerData|}}
<tr>
<td>
{{innerData.one}}
</td>
<td>
{{innerData.two}}
</td>
<td>
{{innerData.three.one}}
</td>
<td>
{{innerData.three.two}}
</td>
<td>
{{innerData.four}}
</td>
<td>
{{innerData.five}}
</td>
<td>
{{innerData.six.one}}
</td>
<td>
{{innerData.six.two}}
</td>
<td>
{{innerData.seven.one}}
</td>
<td>
{{innerData.seven.two}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/each}}
</div>
</body>
</html>
I’ve tried
page-break-inside: avoid !important inside the <thead>, <tr>, <th> but it's not working.<thead> with <div> and give page-break-inside: avoid !important to the div, still not working.I don't know how to make this works. Any help, please?
update
I am open with answer that mix with plain javascript to solve this issue. I am thinking, could I try to detect the position of the <thead>, then, check if the <thead> is near (exact distance) the bottom of the page? If it match the condition, it will add style page-break-before true to that table only?
554
You may want to avoid page breaks inside tables, code snippets, lists of items, and images, for example. Using the page-break-inside property, you can do just that.
In order to prevent a table to be split in several pages it is required to apply the page-break-inside and page-break-after styles to all of its contents. This trick works unless the table occupies more space than a full page.
The page-break-inside property sets whether a page-break should be avoided inside a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on absolutely positioned elements.
always − A page break should be forced after this element's box. avoid − No page break should be placed after the element's box if at all possible. left − Force one or two page breaks after the element's box, such that the next page on which an element is printed will be a left-hand page.
Try limiting each column's width as style="width: <somevalue>%;" in total it should meet 100% like below code. Change the % values and split to the columns according to the amount of content you maintain inside each column.
Example Code:
<tr>
<th rowspan="2" style="width: 10%;">
One
</th>
<th rowspan="2" style="width: 20%;">
Two
</th>
<th colspan="2" style="width: 20%;">
Three
</th>
<th rowspan="2" style="width: 5%;">
Four
</th>
<th rowspan="2" style="width: 5%;">
Five
</th>
<th colspan="2" style="width: 20%;">
Six
</th>
<th colspan="2" style="width: 20%;">
Seven
</th>
</tr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
