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.

If you like this content and found it helpful, please consider supporting me with a small donation.

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.

Veröffentlicht von

Christian Hänsel

Web-Entwickler, SEO-Experte. Ich liebe technisches SEO, die Entwicklung von neuen Ideen und alles rund um das Internet... ja, ich habe mein Hobby zum Beruf gemacht und gehe auch Montags gerne zur Arbeit.

Ein Gedanke zu „jsPDF / html2pdf: add header and footer text to each page“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.