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 !
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>
<!--
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"></a>
Generic break values
NewPage break values
Column break values
Region break values
Global values
-->
<style type="text/css" media="all">
.body {
position: absolute;
}
#page {
break-before: auto;
margin: 0px;
width: 736px;
height: 1103px;
position: relative;
}
h1 {
text-align: center;
}
#page-break {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
padding: 20px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div>
<br><h1>Headline on Page 1</h1>
...
more content on Page 1
...
</div>
<div id="page-break"> Footline on Page 1 </div>
</div>
<div id="page">
<br><h1>Headline on Page 2</h1>
...
more content on Page 2
...
<div id="page-break"> Footline on Page 2 </div>
</div>
<div id="page">
<br><br><h1>Headline on Page 3</h1>
...
more content on Page 3
...
<div id="page-break"> Footline on Page 3 </div>
</div>
</body></html>
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 <thead>
and <tfoot>
elements. They'll print at the top and bottom of every page:
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Another option is to use display table-header-group
and table-footer-group
but cross-browser support isn't great:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
Print Header and footer keeps repeating html
Unfortunately, what you're trying to do isn't really part of the spec for thead
and 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')[0];
footer.style.display = 'table-row-group';
tbl.removeChild(footer);
tbl.appendChild(footer);
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";
tbl.prepend(newTitle);
title.remove();
These blocks can be added to the top of your print function, as shown in the updated Fiddle here: https://jsfiddle.net/5azfn7wu/
Related Topics
How to Position Div Below Another Div
Background Color of Text in Svg
How to Easily Horizontally Center a ≪Div≫ Using Css
Which Characters Are Valid in CSS Class Names/Selectors
How Does Flex-Wrap Work With Align-Self, Align-Items and Align-Content
Does "Display:None" Prevent an Image from Loading
Any Way to Declare a Size/Partial Border to a Box
Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars
Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers
Areas Covered by Flexbox Which Are Difficult or Impossible to Achieve With Grid
How to Make Multiple Divs Display in One Line But Still Retain Width
How to Include CSS Files Using Node, Express, and Ejs
How to Place Two Divs Next to Each Other
How to Transition Height: 0; to Height: Auto; Using Css
Change Navbar Color in Twitter Bootstrap
Can Media Queries Resize Based on a Div Element Instead of the Screen