0

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

jayesh Kathrotiya
  • 13
  • 1
  • 4

3 Answers3

0

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?

Jenni
  • 414
  • 5
  • 6
  • It is still giving the same output maybe because I am not printing the page but reading the data for the ejs file ( I might be wrong:)! – jayesh Kathrotiya Mar 05 '22 at 07:16
0

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>
K J
  • 8,045
  • 3
  • 14
  • 36
0

We have same issue. We found a solution with background image. Just create background image of A4 size / pixel (You can find on google). And try to set background image. Hope it will works. All the best thanks.

Arjun Bhatt
  • 41
  • 4