1
剣道UI描画APIを使用して簡単なHTML表をPDFにエクスポートしています。剣道UI描画APIの書き出しPDFの分割が早すぎるため、ページ上に無駄な空き領域が発生します
デフォルトのフォントサイズが大きいので、公式の剣道UIドキュメント（kendoui.io/kendo-ui/framework/drawing/drawingにある）に従って、コンテナdivとその子どもの全体に新しいフォントサイズを適用します。 -dom＃customising-the-looks）。
問題は、あなたがここに見ることができるようにフォントサイズを小さくすると、私のテーブルはunnecesary空白が生じ、間違った高さに分割さエクスポートしていることである：
ドゥあなたはなぜこれが起こっているのか知っていますか？私はすでに試した：
- 異なる余白のサイズを
- 異なるforcePageBreakが
- 異なるpaperSizes値（Iは、A4サイズを使用するために必要なのですが）
ご清聴ありがとうございました。この問題で私を助けてくれることを願っています。
私はあなたがそれを見るために必要なだけの場合には非常に基本的なJS、CSSとHTMLとのスニペットが含まれている：
\t function getPDF(selector, nro, dateC) { \t
\t \t kendo.drawing.drawDOM(
\t \t \t $(selector),
\t \t \t {
\t \t \t \t forcePageBreak: "-",
\t \t \t \t paperSize: "A4",
\t \t \t \t margin: "0cm",
\t \t \t \t multiPage: true
\t \t \t }).then(function(group) {
\t \t \t \t //Render the result as a PDF file
\t \t \t \t return kendo.drawing.exportPDF(group);
\t \t \t }).done(function(data) { \t \t \t \t
\t \t \t \t //Save the PDF file
\t \t \t \t kendo.saveAs({
\t \t \t \t \t dataURI: data,
\t \t \t \t \t fileName: "filename.pdf"
\t \t \t \t });
\t \t \t });
\t }\t .k-pdf-export *{
\t font-size: 6pt;
\t font-family:Arial, sans-serif;
\t }
\t .k-pdf-export h5 {
\t border: none;
\t padding-bottom: 0px;
\t font-weight:bold;
\t margin-bottom:5px;
\t }
\t .k-pdf-export .configuration-summary .quote-total td{
\t font-weight:bold;
\t }
\t .k-pdf-export strong{
\t \t width:100px;
\t }<body>
\t <div class="wrapper">
\t \t <header class="main-header">
\t \t \t <section class="header"></section>
\t \t \t <section class="main-menu">
\t \t \t \t <div class="container" id="navmenu">
\t \t \t \t \t <ul class="main-nav"></ul> \t \t
\t \t \t \t </div>
\t \t \t </section>
\t \t </header>
\t \t <div class="content-wrapper">
\t \t \t <div class="container">
\t \t \t \t <section class="content"> \t \t \t \t \t
\t \t \t \t \t <div class="container">
\t \t \t \t \t \t <section class="content">
\t \t \t \t \t \t \t <div class="form-horizontal">
\t \t \t \t \t \t \t \t <div class="section-heading">
\t \t \t \t \t \t \t \t \t <h3>Title</h3>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div id="printable" class="row service-configuration configuration-summary service-quote">
\t \t \t \t \t \t \t \t \t <div class="col-sm-12 main-column">
\t \t \t \t \t \t \t \t \t \t <div class="white-space overf">
\t \t \t \t \t \t \t \t \t \t \t <div class="quote-header">
\t \t \t \t \t \t \t \t \t \t \t \t <hr class="blankspace-10">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-sm-6 billing-information">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <h5>Information</h5>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong> <i>Lorem Ipsum</i>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong> <i>Lorem Ipsum</i>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong> <i>Lorem Ipsum</i>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong> <i>Lorem Ipsum</i>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-sm-6 order-information">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <h5>Details</h5>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong>Lorem Ipsum
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong>Lorem Ipsum
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <strong>Sit dolor</strong>Lorem Ipsum
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br> <strong>Sit dolor</strong>Lorem Ipsum
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t <hr class="blankspace-40">
\t \t \t \t \t \t \t \t \t \t \t \t <h5 class="quote-details-title">Table</h5>
\t \t \t \t \t \t \t \t \t \t \t \t <div class="table loosetext">
\t \t \t \t \t \t \t \t \t \t \t \t \t <table>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <thead class="forcenowrap">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <th>Field</th>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <th>Field 2</th>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <th class="qty">Field 3</th>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <th class="price">Field 4</th>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </thead>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sagittis odio, eget malesuada neque.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">494.00</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">25.25</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">125.88</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">297.88</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis. </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">563.73</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">238.36</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">63.32</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="sku">Suspendisse sed ex tristique</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>Consectetur adipiscing elit. Sed vitae sagittis.
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="qty">1</td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="price"><span class="price">1,013.56</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </tbody>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <tfoot class="quote-total">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td></td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td colspan="3">Value <span class="price">999.99</span>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </tfoot>
\t \t \t \t \t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </section>
\t \t \t \t \t </div>
\t \t \t \t </section>
\t \t \t </div>
\t \t </div>
\t </div> \t
</body>