显示突出显示的文本或任何表格行为空白时的问题答案

【问题标题】：issue to show highlighted text or when any of the table rows are blank显示突出显示的文本或任何表格行为空白时的问题
【发布时间】：2018-04-28 22:06:56
【问题描述】：

当用户单击导出按钮时，我正在使用 jsPDF API 将数据导出到 PDF。当有突出显示的文本或任何表格行中没有值时生成 PDF 时，我遇到了问题。突出显示的文本颜色不会显示在生成的 PDF 中，如果表格包含任何空白值，则表格不会在生成的 PDF 中正确显示。

请找到在线演示https://plnkr.co/edit/GfXDGHWNHh2Mb89In7zK?p=preview

演示：

 var app = angular.module("app", []);

 app.controller("myController", ["$scope",
   function($scope) {
   
   $scope.export = function() {

        // var pdf = new jsPDF('landscape');
       var pdf = new jsPDF('p','pt','a4');
        var pdfName = 'test.pdf';

        //var options = {pagesplit: true,'width': 550};
           var options = {
              pagesplit: true,'width': 500
          };


        var $divs = $('.myDivClass')                
        var totalDiv = $divs.length -1;     
        var currentRecursion=0;

        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
            }else{
                currentRecursion++;
                pdf.addPage();
                pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, totalDiv);
        });
    }
   }
 ]);

<!doctype html>
<html ng-app="app">

<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
     
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
   <script src="split_text_to_size.js"></script>
<script src="script.js"></script>
</head>

<body>
  <div ng-controller="myController">
        <button ng-click="export()">Export</button>

   <div class="myDivClass" style="background-color:white">
The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be compared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less commonly) 
      <font color="red">This is red texttttt</font>
    <p><span style='background-color: rgb(255, 255, 0);'>text hightlighted with yellow color</span></p><p><span style='background-color: rgb(255, 0, 0);'>asdjasdjasdsjadhjsahdjasdh 
     red color</span></p><p><span style='background-color: rgb(255, 0, 0);'><b>asdasdasdasdsaas -- bold and red colorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</b></span></p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
     <p><span style="background-color: rgb(255, 255, 0);"><b>Below are the options with bullets</b></span></p><ul><li><span style="background-color: rgb(255, 255, 0);"><b>option1</b></span></li><li><span style="background-color: rgb(255, 255, 0);"><b>option2</b></span></li></ul><p><b style="background-color: rgb(231, 99, 99);">Below are options with numbers</b></p><ol><li><b style="background-color: rgb(231, 99, 99);">option1</b></li><li><b style="background-color: rgb(231, 99, 99);">option2</b></li></ol>   

<p><br></p><table class="table table-bordered"><tbody><tr><td>133</td><td><br></td><td><br></td></tr><tr><td><br></td><td>666</td><td><br></td></tr></tbody></table><p><br></p>

  </div></div>
</body>

</html>

我确信应该有一些 CSS/js 技巧来解决这个问题。任何输入都是有帮助的。

【问题讨论】：

你可以尝试使用html2canvas，然后让jspdf为你生成你的pdf
我尝试使用 html2Canvas 但我看到的问题是我无法添加新页面，它总是显示 page1 但如果数据很大则无法添加新页面。@SagarBhattacharya
尝试 addHTML 方法，我发布了一个解决方案尝试看看它是否有效
html2Canvas 将只生成 1 个页面

标签： javascript jquery css angularjs jspdf

【解决方案1】：

好吧，这不是最好的解决方案，但是您可以将整个文档转换为图像，然后在页面中打印该图像，或者您可以使用他们的新方法 addHTML 但它们不会生成很好的效果

方法一：

  $scope.export = function() {

        // var pdf = new jsPDF('landscape');
       var pdf = new jsPDF('p','pt','a4');
        var pdfName = 'test.pdf';

        //var options = {pagesplit: true,'width': 550};
           var options = {
              pagesplit: true,'width': 500
          };


        var $divs = $('.myDivClass')                
        var totalDiv = $divs.length -1;     
        var currentRecursion=0;

        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
            }else{
                currentRecursion++;
                pdf.addPage();
                pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, totalDiv);
        });
    }

方法 2：其中 printDiv 是您必须在其中包装整个 html 内容的 div

  var app = angular.module("app", []);

         app.controller("myController", ["$scope",
             function($scope) {

                 $scope.export = function() {
                     html2canvas(document.getElementById("printDiv"), {
                         onrendered: function(canvas) {
                            var imgData = canvas.toDataURL('image/png');
                             console.log('Report Image URL: ' + imgData);
                             var doc = new jsPDF('l', 'mm', [canvas.width, canvas.height]); //210mm wide and 297mm high
                             doc.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
                             doc.save('sample.pdf');
                         }
                     });
                 }
             }
         ]);

【讨论】：

第一种方法似乎不错。请查看使用第一种方法 plnkr.co/edit/Azc8miGes9OdS8fXgRAf?p=preview 更新的演示链接，如果您看到生成的 PDF 没有显示整个文本，我尝试在选项中将宽度修改为 300，但仍然没有显示完整的行。任何输入都是有帮助的。 @Sagar Bhattacharya
如果可能，您能否为线程stackoverflow.com/questions/47341930/…@Sagar Bhattacharya 提供输入
我不太确定如何解决此问题，但会尝试找到解决此问题的方法
祝你好运stackoverflow.com/questions/47341930/…