Kendo UI 绘图 API 导出 PDF 拆分 html table 太快，在页面上生成无用的空白 space

Question

我正在使用 Kendo UI 绘图 API 将简单的 html table 导出为 PDF。

由于默认字体很大，我根据官方 Kendo UI 文档（可在 kendoui.io/kendo-ui/framework/drawing/drawing-dom#customizing-the-looks).

问题是减小字体大小会导出我的 table 以错误的高度拆分，导致不必要的白色 space，正如您在此处看到的：

你们知道为什么会这样吗？我已经试过了：

不同的页边距大小
不同的 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>

Answer 1

好的，经过一些测试我设法克服了这个问题。这是我在代码中修改的内容：

设置要导出的元素的宽度和高度，相当于 A4 页面，以英寸为单位（即设置 width: 7in 和 height: 9.25in）。这是让一切都适合的一个变化。
在绘图函数中设置"landscape : false"。
设置 "border:none" 和 "overflow:initial" 一些包含 divs。
更改要导出的目标元素（因此不是使用类并定义 css 的 div，而是查找通用容器 div）。

我不确定哪一个解决了我的问题！但我希望它也能解决其他人的问题。

Kendo UI 绘图 API 导出 PDF 拆分 html table 太快，在页面上生成无用的空白 space

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

javascript

pdf

dom

export-to-pdf

kendo-ui