Question

我使用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>

获取所有canvas元素并遍历该节点列表，使用addPage()方法添加页面，并在最后一次迭代时保存pdf。

如何使用jsPDF打印带有数字页面相同数字画布的PDF？

1 个答案: