在每個頁面中分別顯示每個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); 
     }); 
    } 

我離開對方的回答讓人們可以看到這樣做的兩種方式。