javascript - 如何使用jsPDF打印页数相同的 Canvas 上的PDF？

Question

我使用jsPDF，它打印了从 Canvas 到PDF的所有内容，但它只能首先 Canvas ，我想打印页数与 Canvas 数相同的PDF。示例:我有一个带有 4 个 Canvas 的 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。