我使用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
行收到错误。
答案 0 :(得分: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。