如何使用JSPDF打印使用数字同一号码画布的PDF

Question

i使用JSPDF，它打印了从画布到PDF的所有内容，但是它只能炸毁画布，我想打印带有同一号码帆布数量的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>

获取所有帆布元素并循环通过该节点列表，使用addPage()方法添加页面，然后在最后一个迭代中保存PDF。