剣道pdfの輸出が下にコンテンツを減らす

私は剣道のUIを使ってhtmlからpdfにエクスポートしています。私が直面している問題はhtmlコンテンツがpdfで奇妙なものになってしまいます。あなたは以下剣道pdfの輸出が下にコンテンツを減らす

コンテンツが大きいときに問題がある

<!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>

罰金、それは変なふうにカットします作品短縮内容のページがある link

でそれを試すことができます。スニペットにそれを試してみてください。

<!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>

どのように私はそれはjsファイルエクスポート機能で指定されているように私のコンテンツは、A4形式で素敵に表示できますか？この問題の原因は何ですか？

出典

2016-08-24 Chris

問題は、エクスポートされたコンテンツのためだけに、フォントスタイルを変更することによって発生します。最も予測可能な結果を得るには、ブラウザで表示されるコンテンツとエクスポートされたコンテンツに同じスタイルを使用します。さらに、pako deflateライブラリとPDFファイルへの埋め込みフォントを登録することをお勧めします。ここで

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

良い作品あなたの例の更新バージョンである：あなたの例は、私の場合、問題には、正常に動作している間

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

出典

2016-08-24 20:33:10 dimodi

まだ存在しています。私は 'scale：ratio'という属性を使って、底部の空きスペースを減らすことができましたが、私はまだ私の問題を解決することができます。私はハックをしているように感じ、正しいことではない – Chris