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 :
| 1 2 3 4 5 6 7 8 |
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.
| 1 2 3 4 5 6 7 8 9 10 11 |
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.
| 1 |
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.