Some blank pages are rendered when scroll in page before generating the pdf

[alxistn]

Describe the bug When I scroll in the page and then generate the pdf, there is some blank pages/offset applied before the content is rendered in the pdf. cf. this issue: https://github.com/kempsteven/vue-html2pdf/issues/52

Package Version 1.8

[kristofgilicze]

I can confirm this, same happens here. Using with Nuxt.

[kempsteven]

Hmm there is an easy fix for this but kind of adds redundancy on it.

You can wrap your pdf content on a component like this, and also use it to show your content on the page, something like this:

<template>
    <vue-html2pdf>
         <pdf-content slot="pdf-content" />
    </vue-html2pdf>

    // show content on the view
    <pdf-content />
</template>

Another solution is add a loading overlay & prevent the user to scroll when the pdf is generating.

This issue is caused by the html2canvas package which is being used by html2pdf.js https://github.com/eKoopmans/html2pdf.js/issues/175#issuecomment-634832966

as per him, the solution for this is adding scrollX: 0, scrollY: 0 to the html2canvas options to get past this (html2canvas docs).

you see a sample here, how to add specific options: https://github.com/kempsteven/vue-html2pdf#sample-value-of-html-to-pdf-options

I haven't tested it, but it seems it fixes the issue.

[alxistn]

I confirm that adding scrollX: 0, scrollY: 0 to the html2canvas option works great to fix the blank pages filling when scroll and then generating the PDF.

Thanks @kempsteven ! Great work 👌

[kristofgilicze]

Thanks, works here as well !

Though this really should be the default behaviour, or at least consider a top level prop.

It almost made me throw in the towel with this package, but I'm happy that there is a workaround ! :)

I might publish a draft pull request for the top level prop, if I have the time this week.

[KrittayotToin]

Hmm there is an easy fix for this but kind of adds redundancy on it.

You can wrap your pdf content on a component like this, and also use it to show your content on the page, something like this:

<template>
    <vue-html2pdf>
         <pdf-content slot="pdf-content" />
    </vue-html2pdf>

    // show content on the view
    <pdf-content />
</template>

Another solution is add a loading overlay & prevent the user to scroll when the pdf is generating.

This issue is caused by the html2canvas package which is being used by html2pdf.js eKoopmans/html2pdf.js#175 (comment)

as per him, the solution for this is adding scrollX: 0, scrollY: 0 to the html2canvas options to get past this (html2canvas docs).

you see a sample here, how to add specific options: https://github.com/kempsteven/vue-html2pdf#sample-value-of-html-to-pdf-options

I haven't tested it, but it seems it fixes the issue.

it's not work to me and overlay too

[KrittayotToin]

can anyone help ?? using scaleX:0 scaleY: 0 and using overlay already but not work