OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Html2Pdf library is adding extra spacing on page-break

  • Thread starter Thread starter Saurav baid
  • Start date Start date
S

Saurav baid

Guest
When I use the class .break-page, the extra space above the table is added (highlighted in red). I have tried using negative margin values, but it does not work.

I want the table to move to the top of the new page when I apply .break-page and remove the extra spacing that is being applied on the table. What can be the possible solution?

The code snippet of the function being called,

Code:
function downloadPdf(
  pdfName?: string,
  param?: string,
  htmlElement?: ElementRef
): void {

  let opt = {
    margin: [4, 3, 2, 3],
    filename: pdfName + "_" + param + ".pdf",
    image: { type: "jpeg", quality: 1 },
    html2canvas: { scale: 2, width: 1100 },
    pagebreak: { mode: "css", before: ".break-page" },
    jsPDF: { unit: "em", format: "a4", orientation: "portrait" },
  };

  html2pdf()
    .set(opt)
    .from(htmlElement.nativeElement.innerHTML)
    .toContainer()
    .save();
}

PDF screenshot


<p>When I use the class <code>.break-page</code>, the extra space above the table is added (highlighted in red). I have tried using negative margin values, but it does not work.</p>
<p>I want the table to move to the top of the new page when I apply <code>.break-page</code> and remove the extra spacing that is being applied on the table. What can be the possible solution?</p>
<p>The code snippet of the function being called,</p>
<pre class="lang-js prettyprint-override"><code>function downloadPdf(
pdfName?: string,
param?: string,
htmlElement?: ElementRef
): void {

let opt = {
margin: [4, 3, 2, 3],
filename: pdfName + "_" + param + ".pdf",
image: { type: "jpeg", quality: 1 },
html2canvas: { scale: 2, width: 1100 },
pagebreak: { mode: "css", before: ".break-page" },
jsPDF: { unit: "em", format: "a4", orientation: "portrait" },
};

html2pdf()
.set(opt)
.from(htmlElement.nativeElement.innerHTML)
.toContainer()
.save();
}
</code></pre>
<p><img src="https://i.sstatic.net/rUl7LTgk.png" alt="PDF screenshot" /></p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top