Question

我使用Kendo UI将html导出为pdf，而我遇到的问题是html内容在pdf中被奇怪地删除了。您可以在link

上试用

以下是内容缩短的网页

＆＃13;

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

＆＃13;

问题是，当内容较大时，它会被奇怪地切断。尝试进入片段：

＆＃13;

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

＆＃13;

如何在A4格式中显示我的内容，就像在js导出功能中指定的一样？是什么导致了这个问题？

Answer 1

问题是由动态更改字体样式引起的，仅针对导出的内容。对于大多数可预测的结果，请对浏览器显示的内容和导出的内容使用相同的样式。此外，建议注册 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

剑道pdf出口削减了内容

1 个答案: