Add Footer to every page of pdf using html css
Whilst it is fairly easy to emulate page breaks headers and footers in HTML they are not natural for a format that is designed for unfettered page widths or lengths.
It is common to describe HTML objects as % of a variable canvas the conversion to the fixed Cartesian pages needed by PDF is prone to rounding errors.
Here as an example, the primary aim was to emulate a PDF layout in Microsoft Edge (Chrome based) but the fiddle factors that work fairly well for view and print in one browser will need adjustments in another.
SEE the inset where the page for exactly the same code and target printer which is perfect in edge print preview, is subject to creep-age in Internet Explore, on the same printer defaults !! That crap-page thus often requires minor tweaking to keep it in sync, leading to two different copies of source !
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>
Generic break values
NewPage break values
Column break values
Region break values
<style type="text/css" media="all">
<br><h1>Headline on Page 1</h1>
more content on Page 1
<div id="page-break"> Footline on Page 1 </div>
<br><h1>Headline on Page 2</h1>
more content on Page 2
<div id="page-break"> Footline on Page 2 </div>
<br><br><h1>Headline on Page 3</h1>
more content on Page 3
<div id="page-break"> Footline on Page 3 </div>
Print header/footer on all pages (Print Mode)
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the
<tfoot> elements. They'll print at the top and bottom of every page:
<!-- Will print at the top of every page -->
<!-- Page content -->
<!-- Will print at the bottom of every page -->
Another option is to use display
table-footer-group but cross-browser support isn't great:
Print Header and footer keeps repeating html
Unfortunately, what you're trying to do isn't really part of the spec for
tfoot elements. But there are a few "hacks" that you can use to emulate the desired effect. Here is one that comes to mind:
For the table footer, you can set its display to
table-row-group, remove it from the table, then append it to the table.
// Make footer visible on last page only
let tbl = document.getElementById('table');
let footer = tbl.getElementsByTagName('tfoot');
footer.style.display = 'table-row-group';
For the table header, or really just the title, I would just clone the "title" node, apply the desired styling, prepend it to the table, and remove the original node.
// Make header visible on first page only
let title = document.querySelector('.titles');
let newTitle = title.cloneNode(true);
newTitle.style.textAlign = "center";
newTitle.style.fontWeight = "bold";
These blocks can be added to the top of your print function, as shown in the updated Fiddle here: https://jsfiddle.net/5azfn7wu/