jsPDFを使用して番号ページで同じ番号のキャンバスを印刷するには？

Question

私はキャンバスからPDFへのすべてを印刷したjsPDFを使用しますが、それはキャンバスのみを印刷することができます。同じ番号のキャンバスのページ番号でPDFを印刷したいと思います。サンプル：私は4キャンバスでdivを持っています、PDFにエクスポートすると、4ページの風景が得られます。

$('#export').click(function(e) { 
 
    e.preventDefault(); 
 
    var canvas = document.getElementById("pdf"); 
 
    var context = canvas.getContext('2d'); 
 
    var pdf = new jsPDF("l", "pt", "a4"); 
 
    pdf.addImage(canvas.toDataURL("image/png", 2), 'JPEG', 0, 0, width, height); 
 
    pdf.save("file.pdf"); 
 
});

<div id="pdf"> 
 
<canvas id="canvas_1" ></canvas> 
 
<canvas id="canvas_2" ></canvas> 
 
<canvas id="canvas_3" ></canvas> 
 
<canvas id="canvas_4" ></canvas> 
 
</div> 
 
<button id="export">Print</button>

私はラインcanvas.getContext is not a functionでエラーが発生します。

Answer 1

$('#export').click(function (e) { 
 
e.preventDefault(); 
 
var pdf = new jsPDF("l", "pt", "a4"); 
 
var canvasEl = document.querySelectorAll("canvas"); 
 
canvasEl.forEach(function(canvas,index){ 
 
    canvas.getContext('2d').fillRect(50,50,50*(index+1),50*(index+1)); 
 
    pdf.addImage(canvas.toDataURL("image/png", 2), 'JPEG', 0, 0, canvas.width, canvas.height); 
 
    if(index == canvasEl.length-1){ 
 
    pdf.save("file.pdf"); 
 
    } 
 
    else { 
 
    pdf.addPage(); 
 
    } 
 
}) 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pdf"> 
 
<canvas id="canvas_1" ></canvas> 
 
<canvas id="canvas_2" ></canvas> 
 
<canvas id="canvas_3" ></canvas> 
 
<canvas id="canvas_4" ></canvas> 
 
</div> 
 
<button id="export">Print</button>

、そのノードのリストを介してすべてのcanvas要素とループを取得addPage()方法を使用してページを追加し、最後の反復でPDFファイルを保存します。