我正在使用Kendo UI Drawing API将一个简单的html表格导出为PDF。
因为默认的字体大小是巨大的，我应用一个新的字体大小到整个容器div和它的子，按照官方的剑道UI文档(在kendou .io/Kendo - UI/framework/drawing/drawing-dom# customization -the-looks)。
问题是，减少字体大小导出我的表在一个错误的高度分裂，导致不必要的空白，如你可以看到这里:
- 不减小字体(pdf文件)
- 字体减小(pdf文件)
你们知道为什么会这样吗?我已经试过了:
- 不同的边距尺寸
- 不同forcePageBreak值
- 不同的纸张尺寸(虽然我要求使用A4尺寸)
谢谢您的关注。我希望你能帮我解决这个问题。
我已经包含了一个非常基本的JS, CSS和HTML片段，以防你需要看到它:
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>好的，经过一些测试，我设法克服了这个问题。这是我在代码中修改的内容:
- 设置要导出到相当于A4页面的元素的宽度和高度，单位为英寸(即设置
width: 7in和height: 9.25in)。这是一个改变，使一切都适合。 - 在绘图功能内设置
"landscape : false" - 设置部分包含div的
"border:none"和"overflow:initial"。 - 更改要导出的目标元素(因此，它寻找的不是带有类和定义css的div，而是通用容器div)。
我不确定哪一个解决了我的问题!但我希望它也能解决别人的问题。