如何將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畫布打印到紙上

回答

相關問題