footerTemplate usage

[soniar4i]

Hi! First of all thanks a lot for this library, it's saving me right now.

Just have a small question... I want to add some text in the footer part of the pdf but I haven't managed to set it right, you write that it should be valid html that contains some said classes, so far I have:

<div class="title" style="text-align: justify; text-justify: inter-word;">
  <p> My footer long text </p>
</div>
<span class="date"></span>
<span class="url"></span>
<span class="pageNumber"></span>
<span class="totalPages"></span>

let options = { format: 'A4', footerTemplate: footerContent };
let file = { content: content };
html_to_pdf.generatePdf(file, options).then(...

But there's nothing in the footer when I donwload the PDF, is there something I'm doing wrong?

[DGGomez98]

Same question here, I'm not sure about how to set the header/footer template I couldn't find any example. I'm trying with this configuration but no header is shown

let options = {
      format: "A4",
      path: path.join(
        tempFolderPath,
        reportData.userId.toString() + "/" + reportData.fileName + ".pdf"
      ),
      printBackground: true,
      displayHeaderFooter: true,
      headerTemplate:
        "<span class='date title url pageNumber totalPages '>This is the header<span>",
    };

[DGGomez98]

Update:

I solved this by adding the margin configuration, seems like puppeteer default margin configuration hides the footer and header.

In my case this was the configuration that I set (Note: I want to align footer to right so I set margin-right style) :

let options = {
      format: "A4",
      path: path.join(
        tempFolderPath,
        reportData.userId.toString() + "/" + reportData.fileName + ".pdf"
      ),
      printBackground: true,
      displayHeaderFooter: true,
      footerTemplate:
        '<style>span{width:100% !important;font-size:7px !important;font-family: "Elephant"; !important; margin-left:60%}</style><span> My Footer Page <label class="pageNumber"></label> of <label class="totalPages"> </label> </span>',
      margin: {
        top: "0px",
        bottom: "50px",
        right: "0px",
        left: "0px",
      },
    };

And here is how it looks like.

Also, you can use custom fonts like "Elephant" or modify the footer style using CSS tag. I hope this helps someone.

[nag5623]

how to add images (ex: logo) in the header and footer?

[nag5623]

how to customize our own design to the header and footer?

[nag5623]

how to add header and footer dynamically to all the pages? right now footer coming on the last page.