.each（）関数内でdivをdivに追加できませんでした

Question

複数のdivコンテンツをPDFに書き出しています。私はPDFにデータをエクスポートすると、別のページに各divのコンテンツを表示したい。これを達成するために私は以下のコードに示すように追加しようとしていたが、デモplunker（ユーザーがエクスポートボタンをクリックすると、PDFがダウンロードされ、divコンテンツが個々のページに表示されます）https://plnkr.co/edit/KvkVlYmmmJiZ71sghb1l?p=preview（作業デモプランナー、PDFの個々のページに各divコンテンツが表示されます）。 JS

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

完全なコード：

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（）（.eachに新しいdiv要素を追加できませんでした）：https://plnkr.co/edit/uUiK0Mv8mn88JEEyI3rf?p=preview

Answer 1

あなたのpdfファイルとは別に、あなたのHTMLを追加する必要があります。
最後に、このような機能を$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); 
    }