使用javascript打印画布图像

debugcn 发表于 Dev

airider74

我在canvas elements使用onClick和 a在同一个打印作业中的两页上javascript function打印时遇到了一个小问题canvas elements。

现在我正在使用jsPDF创建可下载的 PDF 供用户保存。这是按预期工作的。

我还想创建一个打印功能，将每个打印canvas为一页。

使用该autoprint功能jsPDF看起来是一个显而易见的答案，但不幸的是，我只能让它吐出canvas在同一页面上挤在一起的纵向格式页面。我想canvas elements横向打印这些，每个打印在它自己的页面上，但在同一个打印作业中。

我已经环顾了一些javascript用于打印图像的其他解决方案，但这些解决方案都假定图像有外部来源。我需要一个这样的解决方案，只指向toDataURL()我已经创建的。

我确定这之前已经在某处得到了回答，但到目前为止我还没有能够正确地将它拼凑在一起。

这是我拼凑jsPDF出来的，上面列出了我不想要的肖像格式。

function print() {
    ctx1.drawImage(c2,0,0); 
    ctx1.drawImage(c3,0,0); 
    var imgData1 = planner1.toDataURL(); 
    var imgData2 = planner2.toDataURL(); 
    var pdf = new jsPDF('l', 'pt', 'letter');
    pdf.addImage(imgData1, 'PNG', 0, 0, 0, 0, 'IMG1', 'fast');
    pdf.addPage();
    pdf.addImage(imgData2, 'PNG', 0, 0, 0, 0, 'IMG2', 'fast');
    pdf.autoPrint();
}‌‌‌‌‌‌

如果有人知道如何操作autoPrint()以支持不同的大小和格式，我很想听听它，因为jsPDF文档有点缺乏。

否则，我会去创建两个字母大小的png图像，这些图像可以在与另一个选项相同的打印作业中打印。

我将永远感激您对此的任何帮助。

airider74

好吧，jsPDF 不会完成它，所以我走了这png条路。不完全是最优雅的解决方案（宁愿不必打开另一个窗口然后关闭它）但它打印的正是我想要的......

<script>
function print() {

  ctx1.drawImage(c2,0,0);
  ctx1.drawImage(c3,0,0);

  var win = window.open();
  win.document.write("<img src='"+planner1.toDataURL()+"'/><img src='"+planner2.toDataURL()+"'/>");
  win.print();
  win.window.close();

  window.location.href = '../php/planner.php?pln=<?php echo $user ?>';
}
</script>

我还添加了一些css以确保页眉和页脚不打印。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。