Vue html2pdf, html element is wrong generated to pdf file

Question

I write app in Vue and I want to use vue-html2pdf to generate some pdf file from an html element but my pdf is cut. Here is screen of the html element: HTML element

And here is the pdf file generated: PDF file

The code of element I want to generate as pdf file.

<vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :preview-modal="true"
      :paginate-elements-by-height="1000"
      filename="hee hee"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="portrait"
      pdf-content-width="800px"
      ref="html2Pdf"
  >
      <section slot="pdf-content" >
        <section class="pdf-content">
          <WarscrollComponent 
            v-for="(miniscroll, index) in getScrollsToPrint" 
            :key="index" 
            :miniscroll="miniscroll"
            component="printSheet"
          />
        </section>
      </section>
    </vue-html2pdf>

Do you have any ideas what I'm doing wrong?

Answer 1

I know this isn't the perfect answer. But, at least it did work for me and have to live with that as there is no other proper solution.

I have to add margin-top: -1123px on the top section of the content of the PDF, which removed space from the top for me.

Your combination should be different, but I am sure there will be one combination that works for you as well.

Please add a comment if someone has a standardised solution for it.