Kendo PDF Export schneidet Inhalt auf der Unterseite

Ich exportiere ein HTML in PDF mit Kendo UI und das Problem, das ich vor mir habe, ist HTML-Inhalt wird seltsam in der PDF geschnitten. Sie können es versuchen, auf dem link Kendo PDF Export schneidet Inhalt auf der Unterseite

Unterhalb der Seite mit verkürzten Inhalt ist die

Das Problem feinen

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
 
    
 
    <style> 
 
    button{ 
 
     margin: 5px; 
 
    } 
 

 
    .k-pdf-export{ 
 
     font-size: 70%; 
 
     font-family: "DejaVu Sans", "Arial", sans-serif; 
 
    } 
 
    </style> 
 
    </head> 
 
<body> 
 
    <button onclick="export_pdf()"> Export PDF </button> 
 
    <div class="pdf-page"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <script> 
 
    function export_pdf(){ 
 
     kendo.drawing.drawDOM($('.pdf-page'), { 
 
      paperSize : "A4", 
 
      margin : { 
 
       top : "2cm", 
 
       left : "1cm", 
 
       right : "1cm", 
 
       bottom : "1cm" 
 
      } 
 
     }).then(function(group) { 
 
      kendo.drawing.pdf.saveAs(group, "export.pdf"); 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

funktioniert, ist, wenn der Inhalt größer ist, es seltsam geschnitten wird. Versuchen Sie es in das Snippet:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
 
    
 
    <style> 
 
    button{ 
 
     margin: 5px; 
 
    } 
 

 
    .k-pdf-export{ 
 
     font-size: 70%; 
 
     font-family: "DejaVu Sans", "Arial", sans-serif; 
 
    } 
 
    </style> 
 
    </head> 
 
<body> 
 
    <button onclick="export_pdf()"> Export PDF </button> 
 
    <div class="pdf-page"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <script> 
 
    function export_pdf(){ 
 
     kendo.drawing.drawDOM($('.pdf-page'), { 
 
      paperSize : "A4", 
 
      margin : { 
 
       top : "2cm", 
 
       left : "1cm", 
 
       right : "1cm", 
 
       bottom : "1cm" 
 
      } 
 
     }).then(function(group) { 
 
      kendo.drawing.pdf.saveAs(group, "export.pdf"); 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

Wie bekomme ich mein Gehalt schön in einem DIN-A4-Format angezeigt, wie es in der js Exportfunktion angegeben ist? Was verursacht dieses Problem?

Quelle

2016-08-24 Chris

Das Problem wird durch die Änderung der Schriftarten im laufenden Betrieb verursacht, nur für den exportierten Inhalt. Verwenden Sie für vorhersagbare Ergebnisse die gleichen Stile für den vom Browser angezeigten Inhalt und für den exportierten Inhalt. Darüber hinaus wird empfohlen, die pako deflate Bibliothek und Schriftarten für die Einbettung in das PDF-Dokument zu registrieren.

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Custom

http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Custom

http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Compression

Hier ist eine aktualisierte Version von Ihrem Beispiel, das funktioniert besser:

http://dojo.telerik.com/UWORa/11

Quelle

2016-08-24 20:33:10 dimodi

während Beispiel funktioniert das Problem in meinem Fall in Ordnung, existiert immernoch. Ich konnte die Menge an Leerraum auf der Unterseite reduzieren, indem ich das Attribut 'scale: ratio' verwende, aber ich bin immer noch in der Lage, mein Problem zu lösen. Ich fühle mich wie Hacks und nicht das Richtige – Chris

Kendo PDF Export schneidet Inhalt auf der Unterseite

Antwort

Verwandte Themen