여러 div를 만드는 HTML2Canvas

Question

jsPDF 및 HTML2Canvas를 사용하여 PDF를 만들려고합니다. PDF로 삽입 할 DIV가 여러 개 있습니다. 모든 DIV를 컨테이너에 넣고 한 번 렌더링하면 첫 페이지 높이가 PDF에만 놓입니다. 여러 div를 렌더링하고 동일한 PDF에 붙여서 페이지별로 계속 이동하는 방법을 알아낼 수 없습니다.

JAVASCRIPT

<div id="container"> 
    <div class="divEl" id="div1">Hi <img src="img1.JPG"> </div> 
    <div class="divEl" id="div2">Why <img src="img2.PNG"> </div> 
</div> 

<button onClick="genPDF()"> Click Me </button> 

Answer 1

는 별도로 각 이미지를 추가

function genPDF() {   
    html2canvas(document.getElementById("container"), { 

     onrendered: function (canvas) { 

      var img = canvas.toDataURL(); 

      var doc = new jsPDF(); 
      doc.addImage(img, 'PNG'); 
      doc.addPage(); 

      doc.save('test.pdf'); 
     } 
    }); 
} 

HTML.
html2canvas 렌더링이 완료되고 pdf에 추가 될 때까지 기다렸다가 최종 PDF를 저장해야합니다.

function genPDF() { 
    var deferreds = []; 
    var doc = new jsPDF(); 
    for (let i = 0; i < numberOfInnerDivs; i++) { 
     var deferred = $.Deferred(); 
     deferreds.push(deferred.promise()); 
     generateCanvas(i, doc, deferred); 
    } 

    $.when.apply($, deferreds).then(function() { // executes after adding all images 
     doc.save('test.pdf'); 
    }); 
} 

function generateCanvas(i, doc, deferred){ 

    html2canvas(document.getElementById("div" + i), { 

     onrendered: function (canvas) { 

      var img = canvas.toDataURL(); 
      doc.addImage(img, 'PNG'); 
      doc.addPage(); 

      deferred.resolve(); 
     } 
    }); 
}