First page blank in vuehtml2pdf

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 (ie 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.)