The purpose:
I am attempting to print a doc with a header, a footer and between them a desk with no fastened top that may match on a number of pages. However the vital level is that the footer must be on the backside of the final web page it doesn’t matter what, and that is what I am having bother with.
The issue:
I take advantage of puppeteer to place my html in a web page then generate the pdf with the api, I attempted to make use of a sticky place, absolute and others to place the footer in backside 0, however the html floor didn’t fill all of the pages when there are a number of, so the footer doesn’t go down.
My failure:
I attempt to set a script to calculate the required top to fill all of the web page however the approximation because of the repetition of the headers of the desk offers sudden outcomes.
The place I’m:
Instance with html background in mild crimson:
Present html simplified (I take advantage of Tailwind 3):
<!doctype html>
<html lang="fr" class="bg-red-200">
<head>
<meta charset="UTF-8">
<meta title="viewport"
content material="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Appropriate" content material="ie=edge">
<title>Doc</title>
<hyperlink rel="stylesheet" href="{{public_path('css/app.css')}}"/>
<model>
@web page {
dimension: A4;
margin: 5mm;
}
html, physique {
font-size: 10px;
top: 100%;
}
</model>
</head>
<physique>
<div>Header</div>
<desk>Knowledge desk</desk>
<div class="break-inside-avoid">Footer</div>
</physique>
</html>
Puppeteer pdf config:
const pdfConfig = {
preferCSSPageSize: true,
printBackground: true,
displayHeaderFooter: false,
}
Thanks for studying, hope somebody will help me.
