在每个页面中分别显示每个div内容

Question

当用户单击导出按钮时，我将div内的数据导出为PDF。我想显示每个div内容以显示在PDF中的单个页面中。

以上情景在演示https://plnkr.co/edit/KvkVlYmmmJiZ71sghb1l?p=preview

相同的时下面的代码应用于工作，它无法工作。 演示这里：https://plnkr.co/edit/P9nUSRY5TytkonM6dUHl?p=preview

js代码：

$scope.export = function() { 
    var pdf = new jsPDF('landscape'); 
    var source = $('#append-source'); 
    $('.myDivClass').each(function(){ 
    var html = "<div>"+$(this) + "</div><!--ADD_PAGE-->";//the code is broken with this line 
    // var html = $(this); 
     source.append(html); 
    }); 
    console.log(source); 
    pdf.addHTML(
      source, 0, 0, { 
       pagesplit: true 
      }, 
      function(dispose){ 
       pdf.save('test3.pdf'); 
      } 
    ); 
    } 

Answer 1

不建议使用jquery这样的角度的应用程序内。要知道为什么看这里：Can we use both jQuery and Angular in our Web Application?

你想要做但是如果你把下列控制器是可能的：

$scope.export = function() { 
    var pdf = new jsPDF('landscape'); 
    var source = ""; 
    var width1 = pdf.internal.pageSize.width; 

    $('.myDivClass').each(function(){ 
     var textForPdfPage = $(this).children().eq(1).children()[0].textContent; 
     var html = "<div>"+ textForPdfPage + " </div><!--ADD_PAGE-->"; 
     source+=html; 
    }); 

    margins = { 
     top: 80, 
     bottom: 60, 
     left: 10, 
     width: '100%' 
    }; 

    pdf.fromHTML(
     source, // HTML string or DOM elem ref. 
     margins.left, // x coord 
     margins.top, { // y coord 
      'width': width1 // max width of content on PDF 
     }, 
     function (dispose) { 
      pdf.save('test.pdf'); 
     }, 
     margins 
    ); 
} 

你的主要问题是，当你在哪里尝试创建HTML字符串你仅使用$(this)。 $(this)为您提供了一个jQuery对象。你想放在页面上的字符串在这个对象中，并使用jquery .children()方法访问。

Answer 2

这是）做的一种方式，而不是fromHTML（）你问使用addHTML（：

$scope.export = function() { 

     var pdf = new jsPDF('landscape'); 
     var pdfName = 'test.pdf'; 

     var options = {}; 

     var $divs = $('.myDivClass')    //jQuery object of all the myDivClass divs 
     var numRecursionsNeeded = $divs.length -1;  //the number of times we need to call addHtml (once per div) 
     var currentRecursion=0; 

     //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively. 
     function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){ 
      //Once we have done all the divs save the pdf 
      if(currentRecursion==totalRecursions){ 
       pdf.save(pdfName); 
      }else{ 
       currentRecursion++; 
       pdf.addPage(); 
       //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element 
       //addHtml requires an html element. Not a string like fromHtml. 
       pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){ 
        console.log(currentRecursion); 
        recursiveAddHtmlAndSave(currentRecursion, totalRecursions) 
       }); 
      } 
     } 

     pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){ 
      recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded); 
     }); 
    } 

我离开对方的回答让人们可以看到这样做的两种方式。