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?

It is hard to point to a cause given the code you've provided. Please be aware that html-to-pdf converters are generally less capable of rendering complex html than the browser. It is good to start with simple html and slowly add more complex html/css as you go. — Joshua Angnoe
– Joshua Angnoe, Commented Jan 20, 2021 at 19:05

Chintan Thummar · Accepted Answer · 2022-04-04 13:20:40Z

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.

answered Apr 4, 2022 at 13:20

Chintan Thummar

1,56219 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue html2pdf, html element is wrong generated to pdf file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related