Search code examples
htmlcssnode.jspdf-generationejs

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:

screenshot of pdf

Solution

  • 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 !

    enter image description here

    <!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>