Support of <header> and <footer> elements

[woolfg]

Support of

and elements which are rendered on each page. Footer additionally supports special span tags "pageCounter" and "totalPages" which are replaced by the current page number or the total page count (see example below).

<footer>
    <div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>

[diegocr]

Looking good, thank you!

[diegocr]

Btw, i've just finished reindenting jspdf.plugin.from_html.js on 84b6204 so don't forget to merge the master before doing any further improvements, just in case of :)

[fireholster]

Is there a way to add images in header an footer here?

[didschai]

Hi all,
it seems that this feature didn't make it into the html() method/plugin. Or am I missing something?
When I use <footer> in the latest version, nothing is rendered.
Can you provide any info, please?

Regards, Denis

[pacsent]

Yes. Any way to add header/footer in HTML and not text?

[speedDaemonAmber]

I am trying to accomplish this as well. Is there a way to add a header/footer in html?

[kundanashish]

I am still struggling with this. Has anybody found any solution?

[RyDVi]

My solution for adding page number with html(...). Perhaps this will help you.

const jspdf = new jsPDF('l', 'mm', 'a4', true);
jspdf.html(document.body, {
  callback(doc) {
    const totalPages = doc.getNumberOfPages();
    for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
      doc.setPage(pageNumber);
      doc.setFontSize(8);
      doc.setTextColor("black");
      doc.text(`${pageNumber}/${totalPages}`, 297 / 2 - 15, 210 - 5);
    }

    doc.save();
  },
  width: 297 - 15 - 5,
  windowWidth: document.getElementsByTagName('html')[0].getBoundingClientRect().width,
  autoPaging: 'text',
  margin: [5,15,10,5],
  x: 0,
  y: 0,
});