Question

我在使用canvas和elements onClick打印javascript function打印canvas {{时遇到一点问题1}}在同一个打印作业中的两个页面上。

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

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

使用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图像，这些图像可以在与另一个选项相同的打印作业中打印。

我会永远感激你对此的任何帮助。

Answer 1

好吧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以确保页眉和页脚不会打印。

使用javascript打印画布的图像

1 个答案: