강조 표시된 텍스트 또는 테이블 행이 비어있는 경우

내보내기 버튼을 클릭 할 때 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="[email protected]" 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 해킹이 있어야 확신합니다. 모든 입력이 도움이됩니다.

출처

2017-11-15 user7833845

아니라 당신이 시간을 사용하여 시도 할 수 있습니다 전체 HTML 콘텐츠를 포장해야하는 사업부가 tml2canvas 그리고 나서 jspdf가 당신을 위해 당신의 pdf를 생성하도록하십시오 –

html2Canvas를 사용해 보았지만 문제는 제가 새로운 페이지를 추가 할 수 없다는 것을 보았습니다. 항상 새로운 페이지를 추가하는데 실패했습니다. @ SagarBhattacharya – user7833845

시도해보십시오. addHTML 메서드, 나는 해결책을 게시하려고하면 작동하는지 확인 –

가장 좋은 해결책은 아니지만 전체 문서를 이미지로 변환 한 다음 페이지의 이미지를 인쇄하거나 새로운 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 당신이

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'); 
         } 
        }); 
       } 
      } 
     ]);

출처

2017-11-16 16:11:52

첫 번째 접근 방식이 좋을 것 같습니다. 첫 번째 접근 방식으로 업데이트 된 데모 링크를 확인하십시오 https://plnkr.co/edit/Azc8miGes9OdS8fXgRAf?p=preview, 생성 된 PDF가 전체 텍스트를 표시하지 않는다면 옵션에서 너비를 300으로 수정하려고 시도했습니다. 그러나 완전한 선을 보여주지 못한다. 모든 입력이 도움이됩니다. @Sagar Bhattacharya – user7833845

가능한 경우 스레드에 대한 입력을 제공하십시오. https://stackoverflow.com/questions/47341930/decrease-the-width-of-the-images-to-fit-in-the-pdf-file @ Sagar Bhattacharya – user7833845

이 문제를 해결하는 방법을 잘 모르겠으나이 문제에 대한 해결책을 찾으려고 노력할 것입니다. –

강조 표시된 텍스트 또는 테이블 행이 비어있는 경우

답변

관련 문제