eKoopmans/html2pdf.js

Having trouble with page break, there is a huge margin on top of the second page.

sh00nyan opened this issue · 1 comments

I am using html2df in Vue 3 application. I have following code in my component.

<script>
...
const exportToPDF = () => {
  const element = document.getElementById('print-content')
  const options = {
    margin: 2,
    filename: 'test-summary.pdf',
    image: { type: 'jpeg', quality: 1 },
    html2canvas: {
      dpi: 300,
      scale: 2,
      useCORS: true,
      allowTaint: true,
      backgroundColor: '#FFFFFF',
      letterRendering: true,
      width: 1440,
    },
    jsPDF: {
      unit: 'mm',
      format: 'a4',
      orientation: 'portrait',
      compress: true,
    },
  }
  html2pdf()
    .from(element)
    .set(options)
    .toPdf()
    .save()
}
...
</script>

and in the HTML/template section

<template>
...
<div class="html2pdf__page-break"></div>

second page content...
</template>

[sample-report.pdf](https://github.com/eKoopmans/html2pdf.js/files/11443815/sample-report.pdf)

As can be seen in the attached generated pdf (second page) there is a huge margin on the top. How do I resolve this ?

Looks like I have the same issue as #357

I have tried the workaround suggested there and the issue is resolved.