HTML2Canvas erstellen mehrere divs

Question

Ich versuche, ein PDF mit JsPDF und HTML2Canvas zu erstellen. Ich habe mehrere DIVs in das PDF einfügen. Wenn ich versuche, alle DIVs in einen Container zu legen und einmal zu rendern, wird nur die erste Seitenhöhe in das PDF eingefügt. Ich kann nicht herausfinden, wie man mehrere Divs rendert und sie in dieselbe PDF-Datei einfügt, so dass sie Seite für Seite weiterläuft.

JAVASCRIPT

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

<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

separat jedes Ihrer Bilder hinzufügen.
Sie müssen warten, bis alle html2canvas Renderings fertig sind und zu pdf hinzugefügt und speichern Sie dann Ihre endgültige pdf.

Eine Möglichkeit, dies zu erreichen, indem er mit JQuery und Anordnung von Versprechungen, würde tatsächliche Code wie folgt aussehen:

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