Add Footer to every page of pdf using html css

I am generating PDF using ejs file in nodejs. Is it possible to add Footer on every page of the generated PDF?

Here is my ejs file:

<!DOCTYPE html>
<html>
...
<head>
 <style>
  footer{
            background-color: red;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 </style>
</head>
<body> ... </body>
<footer>
 <p>this is footer</p>
</footer>
</html>

here is my nodejs code snippet:

ejs.renderFile(path.join(__dirname, './views', "report-template.ejs"), { invoicedata: JSON.parse(results[0].jsondata), moment:moment }, (fileerr, data) => {
                    if (fileerr) {
                        console.log("Error!", fileerr);
                    } else {
                        let options = {
                            "height": "11.7in",
                            "width": "8.3in",
                        }
                        pdf.create(data, options).toFile("report.pdf", function (err, data) {
                            if (err) {
                                console.log("error!!");
                            } else {
                                console.log("file created successfully");
                            }
                        })
                    }
                })

The output pdf getting is:

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

Maybe this CSS can help? I.e. change “absolute” position to fixed?

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }
}

There were some comments in this question that might be helpful:
How to use HTML to print header and footer on every printed page of a document?

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating