javascript - 无法在 .each() 函数中将 div 添加到 PDF

Question

我正在将多个 div 内容导出到 PDF 中。将数据导出到 PDF 时，我想在单独的页面中显示每个 div 内容。为此，我尝试按照下面的代码添加，但仍然无法在单独的页面中显示每个 div 内容，如演示 plunker 中所示(当用户单击导出按钮时，将下载 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(无法在 .each() 中添加新的 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);
   }