I’m working on generating PDFs with Puppeteer and I’m looking for assistance to place a footer element correctly at the bottom of the last page. The content is dynamic and can cover multiple pages, but I want to ensure that the footer stays at the bottom of the final page only.
I attempted to use CSS properties like ‘position: fixed’ and calculated heights using the DOM’s scrollHeight and offsetTop methods, but those solutions aren’t very effective due to my table setup, which includes both thead and tfoot elements, along with ‘page-break-inside’ styles.
Here’s a sample of my HTML structure:
<!DOCTYPE html>
<html>
<head>
<style>
.main-content {
background-color: #ccc;
}
.page-footer {
background-color: #f4a261;
}
</style>
</head>
<body>
<div class="main-content">
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Item details row 1</td>
</tr>
<tr>
<td colspan="4">Item details row 2</td>
</tr>
<tr>
<td colspan="4">Item details row 3</td>
</tr>
<tr>
<td colspan="4">Item details row 4</td>
</tr>
<tr>
<td colspan="4">Item details row 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Summary totals</td>
</tr>
</tfoot>
</table>
</div>
<div class="page-footer">
This footer should appear at the bottom of the last page
</div>
</body>
</html>
The content within the table is generated dynamically and the number of pages varies. I’m looking for a reliable method to guarantee that the footer div consistently remains at the bottom of the last page when the PDF is created. Any advice or solutions would be greatly appreciated!