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

无法在.each（）函数

1 个答案: