複数のdivを作成するHTML2Canvas

Question

jsPDFとHTML2Canvasを使用してPDFを作成しようとしています。 私はPDFに挿入する複数のDIVを持っています。 すべてのDIVをコンテナに入れて一度レンダリングしようとすると、最初のページの高さだけがPDFに挿入されます。 複数のdivをレンダリングして同じPDFに貼り付けることができないため、1ページずつページが移動します。

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

は別にあなたのイメージのそれぞれを追加します。
すべてのhtml2canvasレンダリングが完了し、pdfに追加されてから最終的なpdfを保存するまで待つ必要があります。

つのjQueryを使用することによって、これを達成する方法と約束の配列、実際のコードは次のようになります。

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