如何将HTML画布打印到纸上

我已创建了一个基于HTML的网页，其中包含form，一些texts和canvas。我试图打印包含画布在一张纸上的这个页面。但问题是 - 画布无法打印。我还用toDataURL()方法在打印前将canvas转换为图像，但它仍然无法使用。任何人都可以给我一些线索吗？如何将HTML画布打印到纸上

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.fillRect(0, 0, 150, 100); 
 
var img = c.toDataURL("image/png"); 
 
document.write('<img src="'+img+'"/>'); 
 

 
function printData(){ 
 
var divToPrint=document.getElementById("printTable"); 
 
newWin= window.open(""); 
 
newWin.document.write(divToPrint.outerHTML); 
 
newWin.print(); 
 
newWin.close(); 
 
} 
 

 
$('#printButton').on('click',function(){ 
 
printData(); 
 
});

<canvas id="myCanvas"></canvas> 
 
<table id="printTable"> 
 
<button type="button" id="printButton" class="btn btn-info"> Print </i></button> 
 
<tr><td>Data1 : </td><td >HTML</td></tr> 
 
<tr><td>Data2 : </td><td >CSS</td></tr> 
 
<tr><td>Image : </td><td >Wanna print the image here.</td></tr>

来源

2016-11-15 Devesh N.

[快速打印HTML5画布]的可能的复制（http://stackoverflow.com/questions/12809971/quick-print-html5-canvas） – SergeyLebedev

在这里，你用JS选择和Jquery选择器。你有没有包含jquery？尝试仅使用其中一个。 – Alexis

当您调用toDataURL时，画布上是否绘制了任何东西？ – Kaiido

你可以做的是尝试一些其他要求的网页其他回答不错的解决方案，非常类似于你试图archieve什么的。

尝试检查这里： Capture HTML Canvas as gif/jpg/png/pdf?

来源

2016-11-15 09:40:49

...以及现代浏览器（Chrome，FF和Edge）均允许您右键单击 - 保存 - 作为桌面图像的画布。然后用户可以右键单击 - 打印该图像。 – markE

如何将HTML画布打印到纸上

回答

相关问题