未能將div添加到PDF中.each（）函數

Question

我正在將多個div內容導出到PDF中。我想在將數據導出到PDF時將每個div內容顯示在單獨的頁面中。爲了實現此目的，我試圖添加如下代碼所示的內容，但仍然無法顯示單個頁面中的每個div內容（如演示文稿中所示）當用戶點擊導出按鈕時，PDF被下載，並可以看到div內容顯示在單個頁面中）：https://plnkr.co/edit/KvkVlYmmmJiZ71sghb1l?p=preview（工作演示plunker，它顯示PDF的單個頁面中的每個div內容）。

 source.append($('<div>')); 
     source.append($(this)); 
     source.append($('</div><!--ADD_PAGE-->')); 

完整的js代碼：

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

    $scope.employees = [{pageIndex: "randomText1",pageHeader: "This should be shown in page1"}, 
    {pageIndex: "randomeTexthere",pageHeader: "This should be shown in page2"}, 
    {pageIndex: "someRandomText",pageHeader: "This should be shown in page3"}, 
    {pageIndex: "four",pageHeader: "This is shown in page4"},]; 

$scope.export = function() { 
    var pdf = new jsPDF('landscape'); 
    var source = $('#append-source'); 
    $('.myDivClass').each(function(){ 
     var html = $(this); 
     source.append($('<div style="background-color: yellow">')); 
     source.append(html)); 
     source.append($('</div><!--ADD_PAGE-->')); 
    //var html = "<div>"+$(this) + "</div><!--ADD_PAGE-->";//the code is broken with this line 

    }); 
    console.log(source); 
    pdf.addHTML(
      source, 0, 0, { 
       pagesplit: true 
      }, 
      function(dispose){ 
       pdf.save('test3.pdf'); 
      } 
    ); 
    } 
    } 
]); 

演示plunker（未能在。每個添加新的div（））：https://plnkr.co/edit/uUiK0Mv8mn88JEEyI3rf?p=preview

Answer 1

你必須單獨添加HTML到您的PDF文件。
最後改變你的$scope.export這樣的功能。

$scope.export = function() { 
    var pdf = new jsPDF('landscape'); 
    $('.myDivClass').each(function(){ 
     var html = $(this); 
     pdf.fromHTML(html.html(),15,15,{'width':170}); 
     pdf.addPage();   
    }); 
    pdf.save('test3.pdf'); 
} 

更新：如果您要使用addHTML保存。 每個div的大小會有所不同，並且不能將圖像分成相同的高度。所以你必須單獨添加div。
代碼

$scope.html = []; 
    $scope.addPagesAndPrint = function(pdf, index){ 
     var source = $('#append-source'); 
     source.empty(); 

     source.append($('<div>')); 
     source.append($scope.html[index]); 
     source.append($('</div><!--ADD_PAGE-->')); 

     pdf.addHTML(
      source, 0, 0, { 
       pagesplit: true 
      }, 
      function(dispose){ 
      if(index == $scope.html.length - 1) 
       pdf.save('test4.pdf'); 
      else{ 
       pdf.addPage(); 
       $scope.addPagesAndPrint(pdf, index + 1); 
      } 
      } 
    ); 
    } 
    $scope.export = function() { 
     var pdf = new jsPDF('landscape'); 
     $('.myDivClass').each(function(){ 
     $scope.html.push($(this)); 
     }); 
     $scope.addPagesAndPrint(pdf, 0); 
    }