Content on screen dissappears

[cjrupak]

Hey,

Thank you for this awesome script/component.

The issue that I am facing is when I wrap my component containing PDF content inside vue-html2pdf, the content disappears from the DOM but it is generating the PDF correctly upon button click.

<vue-html2pdf
   :show-layout="false"
   :float-layout="true"
   :enable-download="true"
   :preview-modal="true"
   :paginate-elements-by-height="1400"
   filename="some_file_name"
   :pdf-quality="2"
   :manual-pagination="false"
   pdf-format="a4"
   pdf-orientation="portrait"
   pdf-content-width="800px"
   ref="html2Pdf"
>
     <dashboard slot="pdf-content" />
</vue-html2pdf>

The page is blank but the PDF is generating. Please take a look at Before and After images below.

Before

After

Thanks!

[kempsteven]

Hey, Thank you for appreciating my work! Try setting :float-layout to false.

Note that the component will set the contents to whatever you set on the prop pdf-content-width. In your sample its set to 800px, so the component will have 800px width on the view

[cjrupak]

Hi,

Thank you for the quick response.

Setting :float-layout to false did help but then it was also displaying the layout for PDF beneath the browser view. So it was rendering both the browser and PDF views at the same time.

I found another way or a workaround you can say but tell you the truth I really don't know if this is how it is suppose to be in the first place but I added the component containing the content on the top of vue-html2pdf component, like below:

<dashboard  /> <!--/ Here is the component for browser view -->
<vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="upgame"
        :pdf-quality="2"
        :manual-pagination="true"
        pdf-format="a4"
        pdf-orientation="portrait"
        pdf-content-width="800px"
        ref="html2Pdf"
      >
        <dashboard slot="pdf-content" /> <!--/ same component for PDF with slot attribute -->
</vue-html2pdf>

If this is how it was meant to be then I made the dumbest mistake ever. (LOL)

Anyways, with the above change, things are working for me.

Cheers!

[kempsteven]

Yeah hahah, It's either you use the props float-layout to show the pdf-content or just use the same component on the page.

Anyways cool, glad everything worked for you!