1
검도 UI 드로잉 API를 사용하여 간단한 HTML 테이블을 PDF로 내 보냅니다.검도 UI 드로잉 API 내보내기 PDF가 너무 빨리 나뉘어 페이지에 쓸데없는 빈 공간이 생깁니다.
기본 글꼴 크기가 크기 때문에 공식 Kendo UI 설명서 (kendoui.io/kendo-ui/framework/drawing/drawing에 있음)에 따라 전체 컨테이너 div와 해당 하위 항목에 새 글꼴 크기를 적용합니다. -dom # customizing-the-looks).
문제는 당신이 여기에서 볼 수있는 글꼴 크기를 줄이는 것이, 내 표는 unnecesary 공백 결과, 잘못된 높이에서 갈라 수출이다 :
마 왜 이런 일이 일어날 지 알고 있니? 난 이미 시도 :
이 관심을 가져 주셔서 감사합니다 (I는 A4 크기를 사용하도록 요구하고 있지만)
- 다른 이익률은
- 다른 forcePageBreak는
- 다른 paperSizes 값 크기. 이 문제에 대해 저를 도울 수 있기를 바랍니다.
내가 아주 기본적인 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>