esejuanb esejuanb - 3 months ago 94
Javascript Question

Kendo UI Drawing API export PDF splits html table too soon, generating an useless empty space on the page

I am using the Kendo UI Drawing API to export a simple html table to PDF.

Since default font size is huge, I apply a new font size to the whole container div and its children, as per the official Kendo UI documentation (found in kendoui.io/kendo-ui/framework/drawing/drawing-dom#customizing-the-looks).

The problem is that reducing font size exports my table splitted at a wrong height, resulting in unnecesary white space, as you can see here:



Do you guys know why this might be happening? I already tried:


  1. Different margin sizes

  2. Different forcePageBreak values

  3. Different paperSizes (although I am required to use A4 size)



Thank you for your attention. I hope you can help me with this issue.

I have included a snippet with the very basic JS, CSS and HTML just in case you need to see it:



function getPDF(selector, nro, dateC) {
kendo.drawing.drawDOM(
$(selector),
{
forcePageBreak: "-",
paperSize: "A4",
margin: "0cm",
multiPage: true
}).then(function(group) {
//Render the result as a PDF file
return kendo.drawing.exportPDF(group);
}).done(function(data) {
//Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "filename.pdf"
});
});
}

.k-pdf-export *{
font-size: 6pt;
font-family:Arial, sans-serif;
}
.k-pdf-export h5 {
border: none;
padding-bottom: 0px;
font-weight:bold;
margin-bottom:5px;
}
.k-pdf-export .configuration-summary .quote-total td{
font-weight:bold;
}
.k-pdf-export strong{
width:100px;
}

<body>
<div class="wrapper">
<header class="main-header">
<section class="header"></section>
<section class="main-menu">
<div class="container" id="navmenu">
<ul class="main-nav"></ul>
</div>
</section>
</header>
<div class="content-wrapper">
<div class="container">
<section class="content">
<div class="container">
<section class="content">
<div class="form-horizontal">
<div class="section-heading">
<h3>Title</h3>
</div>
<div id="printable" class="row service-configuration configuration-summary service-quote">
<div class="col-sm-12 main-column">
<div class="white-space overf">
<div class="quote-header">
<hr class="blankspace-10">
<div class="row">
<div class="col-sm-6 billing-information">
<h5>Information</h5>
<p>
<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
<br>
<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
<br>
<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
<br>

<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
</p>
</div>
<div class="col-sm-6 order-information">
<h5>Details</h5>
<p>
<strong>Sit dolor</strong>Lorem Ipsum
<br>
<strong>Sit dolor</strong>Lorem Ipsum
<br>
<strong>Sit dolor</strong>Lorem Ipsum
<br> <strong>Sit dolor</strong>Lorem Ipsum
<br>
</p>
</div>
</div>
<hr class="blankspace-40">
<h5 class="quote-details-title">Table</h5>
<div class="table loosetext">
<table>
<thead class="forcenowrap">
<tr>
<th>Field</th>
<th>Field 2</th>
<th class="qty">Field 3</th>
<th class="price">Field 4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sagittis odio, eget malesuada neque.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">494.00</span>
</td>
</tr>
<tr>
<td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">25.25</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">125.88</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">297.88</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis. </td>
<td class="qty">1</td>
<td class="price"><span class="price">563.73</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">238.36</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique
</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">63.32</span>
</td>
</tr>
<tr>
<td class="sku">Suspendisse sed ex tristique</td>
<td>Consectetur adipiscing elit. Sed vitae sagittis.
</td>
<td class="qty">1</td>
<td class="price"><span class="price">1,013.56</span>
</td>
</tr>
</tbody>
<tfoot class="quote-total">
<tr>
<td></td>
<td colspan="3">Value <span class="price">999.99</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
</div>
</body>




Answer

Ok, after some tests I managed to overcome this issue. This is what I modified in my code:

  • Set "landscape : false" for the drawing function.
  • Set "border:non" and "overflow:initial" for some containing divs (I have a hunch this is what fixed it for me).
  • Change the element being targeted for exporting (so instead of a div with classes and defined css, it looks for a generic container div).

I am not sure about which one solved my problem! But I hope it solves someone else's too.