search

kempsteven / vue-html2pdf

vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is basically a vue wrapper only and uses html2pdf.js behind the scenes.
https://www.npmjs.com/package/vue-html2pdf
MIT License
440 stars 75 forks source link

Content does not render #54

Open dahyui opened 3 years ago

dahyui commented 3 years ago

Describe the bug I cannot reproduce this consistently all the time, but at times, the pdf displays only the top half of the HTML content and it displays the content halfway down the page.

To Reproduce Steps to reproduce the behavior:

  1. Setup as per documentation.
  2. Created a custom component and imported into vue-html2pdf tag
  3. Load page, click on the print button (as mentioned above, happens sporadically)

Screenshots If applicable, add screenshots to help explain your problem. correct.pdf - correct layout error.pdf - cut off content

Package Version 1.8.0

dahyui commented 3 years ago

Add another screenshot for reference - you can see in the preview model, the content below the table is not rendered but the HTML has been populated.

Screenshot 2021-01-13 at 18 24 52
kempsteven commented 3 years ago

Does your pdf content have a really long height?

html2pdf.js uses canvas under-the-hood, canvases have a limit on height & width(limit depends on the browser), if your html height/width exceeds the limit there will be a chance that the content will be cut off.

Please see known issues: https://www.npmjs.com/package/vue-html2pdf#known-issues

There is a fix for this, haven't tried yet tho https://github.com/eKoopmans/html2pdf.js/issues/19#issuecomment-455868274

Gazoon007 commented 1 year ago

There is a fix for this, haven't tried yet tho eKoopmans/html2pdf.js#19 (comment)

@kempsteven I still can't figure out how to integrate the workaround with vue-html2pdf on beforeDownload event...