First page blank in vuehtml2pdf - vue.js

Question

vuehtml2pdf generating pdf but first page is blank only when my content is too much, it does break to second page but first page is left blank.
<client-only>
<vue-html2pdf
ref="html2pdf"
pdf-format="a4"
:show-layout="false"
:preview-modal="false"
:enable-download="false"
:manual-pagination="false"
#progress="onProgress($event)"
:pdf-quality="2"
:paginate-elements-by-height="10"
:filename="user.fullName + 'resume'"
#beforeDownload="beforeDownload($event)"
:html-to-pdf-options="{
filename: user.fullName + ' Resume',
jsPDF: {
format: 'a4',
unit: 'mm'
},
html2canvas: {
useCORS: true,
dpi: 192,
letterRendering: true,
scale: 4, // resolution
},
}">
<section slot="pdf-content">
<section>
<component :is="resumeComponent"></component>
</section>
</section>
</vue-html2pdf>
this is my code and my component is dynamic and it might have many pages of data or maybe one page. but when the data is too much an empty page is generated at first.

Answer 1

You have a very low value of paginate-elements-by-height
That number is in pixels.
Try 1000, instead of 10.
When that value is very low, it creates the behaviour you see:
It seems to eject one blank page, and then put one item on each subsequent page, with no limit on the size of that item (i.e. it doesn't break items).
Most likely its algorithm is:
For each item:
Does that item fit onto the current page without exceeding the paginate-elements-by-height?
If so, add it.
If not, eject page, and add it to the next page, irrespective of whether it is within the limit of paginate-elements-by-height.
(I suppose this is necessary, because if it applied that limit on the next page, then an outsize item would cause an infinite number of pages to be ejected.)
I think your code design puts all your elements inside a single super-element
That explains why it always ejects a page at the beginning. vue-html2pdf is not receiving a series of elements, but a single giant element:
<section slot="pdf-content">
<section>
<component :is="resumeComponent"></component>
</section>
</section>
Instead of putting all your individual elements inside , I suggest breaking it up into individual entries inside the <vue-html2pdf> tag.
That would allow the pagination function to work correctly.
<vue-html2pdf ....>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</vue-html2pdf>
Make sure each of the items that are direct children of <vue-html2pdf> has only a reasonable vertical height: no larger than the screen size.
If this works for you, remember to mark the answer as correct!