jsPDF / html2pdf: add header and footer text to each page

In a recent project I needed to add header and footer text (like page count) to every single generated html2pdf / jsPDF page.

There are a lot of instructions on the web, but none of those are really doing what I wanted.

Basically, I needed to use the callback  function of html2pdf to loop over the total pages, and then access that single page to add text to it.

html2PDF: Add a header and footer to every page

So the first step is to use the callback  function of html2pdf :

html2pdf(content, {
    margin: 10,
    filename: "my.pdf",
    image: {type: 'jpeg', quality: 1},
    html2canvas: {dpi: 72, letterRendering: true},
    jsPDF: {unit: 'mm', format: 'a4', orientation: 'landscape'},
    pdfCallback: pdfCallback
})

And within the callback function, I am looping over the pages of the generated document. You can find the total number of pages within the returned jsPDF-Object  which is called pdfObject in my example.

function pdfCallback(pdfObject) {
    var number_of_pages = pdfObject.internal.getNumberOfPages()
    var pdf_pages = pdfObject.internal.pages
    var myFooter = "Footer info"
    for (var i = 1; i < pdf_pages.length; i++) {
        // We are telling our pdfObject that we are now working on this page
        pdfObject.setPage(i)
        // The 10,200 value is only for A4 landscape. You need to define your own for other page sizes
        pdfObject.text(myFooter, 10, 200)
    }
}

Using this code you can simply add a header and a footer text to each page of the generated PDF document.

To add a header text, you can simply add the following line to the above code.

pdfObject.text("my header text", 10, 10)

This will add the text “my header text” at the position x = 10, y = 10 to every page of your PDF document.