Is there a way to add html header and footer?

[htcang]

I know there is a way to add normal text, how about adding html to header and footer ? (e.g images and styled text)

[vicdaran]

You can add header or footer using the following example. In my case I add a footnote in all the pages:

var totalPages = pdf.internal.getNumberOfPages(); for (i = 1; i <= totalPages; i++) { pdf.setPage(i); pdf.setFontSize(5); pdf.setTextColor(0); pdf.text(pdf.internal.pageSize.getWidth() - 5, pdf.internal.pageSize.getHeight() - 0.1, "YOUR_TEXT"); pdf.addImage("YOUR_IMAGE", 'JPEG', pdf.internal.pageSize.getWidth() - 1.1, pdf.internal.pageSize.getHeight() - 0.25, 1, 0.2); }

[bobicgit]

+1

[rp3r]

Is there any way to add instead of a plain String some HTML-Markup like <strong>Your text</strong>? I couldn't find a solution for this.

[htcang]

@rp3r there is no official way. The only workaround i know and using is convert the html part to canvas using html2canvas, then use the trick @viktordart mention above to add the image into header/footer

[YavarR]

Thanks for your job, it works perfect , i just wanted to ask you, It's possible to add HTML to Header and Footer?

[Naren-hybreeder]

@vicdaran , I know this post is too old but can you explain to me your code and how it's working? I have tested it but not working for me.

[Neelam-zanvar]

how to add header text? function exportToPDF(tableId) { var element = document.getElementById(tableId); var opt = { margin: 0.5, filename: 'Audit-Report.pdf', enableLinks: false, pagebreak: { mode: 'avoid-all' }, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } }; html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) { var totalPages = pdf.internal.getNumberOfPages(); //print current pdf width & height to console console.log("getHeight:" + pdf.internal.pageSize.getHeight()); console.log("getWidth:" + pdf.internal.pageSize.getWidth()); for (var i = 1; i <= totalPages; i++) { pdf.setPage(i); pdf.setFontSize(10); pdf.setTextColor(150); //divided by 2 to go center // pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 5, pdf.text(pdf.internal.pageSize.getWidth() - 5, pdf.internal.pageSize.getHeight() - 0.3, "Page " + i + " of " + totalPages); //pdf.internal.pageSize.getHeight() - 0.1); } }).save(); } Here is my export to pdf function which takes a tabled id as input . i want to add header, footer is working fine with your code. I want to add a title page with an image as first page of pdf doc, and watermark in middle of each page