Why first page is left blank on printing with vue-html2pdf which internally uses html2pdf.js

Question

Hi i'm facing the problem with printing using vue component called vue-html2pdf

The problem as follows:

1. the pagination does not break the page when content added. on print page becomes 3
2. the first page is printing as blank on click of download

Here is the setting i'm using for printing:

<vue-html2pdf
  :show-layout="false"
  :float-layout="true"
  :enable-download="true"
  :preview-modal="true"
  :paginate-elements-by-height="1400"
  filename="nightprogrammerpdf"
  :pdf-quality="2"
  :manual-pagination="false"
  pdf-format="a4"
  :pdf-margin="10"
  pdf-orientation="portrait"
  pdf-content-width="800px"
  @progress="onProgress($event)"
  ref="html2Pdf"
>

Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532

Answer 1

After playing around with your codesandbox, I found solution: remove section, then the first blank page gone.

<!-- 
<section slot="pdf-content">
  <ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />

but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.

<template>
  <div style="margin: 12px 12px">
    <img src="https://picsum.photos/500/300" />
    <!-- <div> -->
    <p>
      <strong
        ><a href="https://www.nightprogrammer.com/" target="_blank"
          >Nightprogrammer.com</a
        ></strong

I guess the library can't accept too much div.

Here is my modified codesandbox. pdf looks better if you open standalone page ( https://1puw7d.csb.app )

https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue

Answer 2

Just replace the section element by a div and should fix it for you.