kempsteven/vue-html2pdf

Footer on every page

dextersiah opened this issue · 5 comments

Hi, is it possible to add a footer on every page? What I'm looking for is different from How I can add footer with page numbers and date? #30.

instead of having page numbers and date. I'm trying to add something like a company information similarly to a company report where they will have their contact details are the end of every page.

The issue now is that the pdf-content doesn't stretch the entire height of the canvas so in cases where the page has fewer contents, the footer would move to the top.

I have tried setting the html2canvas height property to the same height as paginateElementsByHeight hoping that the content could stretch to its max height but no luck on that.

From the screenshot below. You can see that the pdf-content's (grey background) height stretches to its max content while there is a big space below it.

Is there a way to set the footer content to be always at the bottom on the canvas??

Thanks in advance.

Screenshot 2021-06-22 at 5 15 53 PM

Have a look at one of the use cases of @beforeDownload event here:
https://github.com/kempsteven/vue-html2pdf#sample-use-case-of-beforedownload

in that sample I demonstrate how to add pagination on every page footer

What if i want more than just pagination text but instead I want to add html element on the footer. Is that possible?

hmmm not sure but I think you can produce similar results, you can see the pdf object right? like the one with pdf.setTextColor
that is jsPDF, this package uses jsPDF under the hood. With jsPDF you can create a lot UI.
this is jsPDF's docs:
http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

pdf.setFontSize(10)
pdf.setTextColor(150)
pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() * 0.88), (pdf.internal.pageSize.getHeight() - 0.3))

Hmmm okay understood I will explore on this. Thanks for the help @kempsteven. You may close this thread.