CODEWITHSUNDEEP
javascriptpdfdomkendo-uiexport-to-pdf
esejuanb
esejuanb

Reputation: 131

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>

Upvotes: 4

Views: 3597

Answers (1)

esejuanb
esejuanb

Reputation: 131

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

  • Set width and height of the element being exported to the equivalent of an A4 page, in inches (meaning, set width: 7in and height: 9.25in). This was the one change that made everything fit.
  • Set "landscape : false" inside the drawing function.
  • Set "border:none" and "overflow:initial" for some containing divs.
  • 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.

Upvotes: 2

Related Questions