快速打印HTML5畫布

我想將畫布圖像直接發送/打印到默認打印機。這意味着快速打印。快速打印HTML5畫布

任何人都可以提示。

Javascript或jQuery。

2012-10-09 Derin

你有什麼問題？打印圖像或從畫布上獲取圖像？或兩者？請更具體一些。另外，你到目前爲止嘗試過什麼？ –

toDataURL（），給我們從畫布的圖像數據。我想直接發送到打印機。 – Derin

我尋覓了很多，發現該工程完美的解決方案:) 使用的onclick事件

function printCanvas() 
{ 
    var dataUrl = document.getElementById('anycanvas').toDataURL(); //attempt to save base64 string to server using this var 
    var windowContent = '<!DOCTYPE html>'; 
    windowContent += '<html>' 
    windowContent += '<head><title>Print canvas</title></head>'; 
    windowContent += '<body>' 
    windowContent += '<img src="' + dataUrl + '">'; 
    windowContent += '</body>'; 
    windowContent += '</html>'; 
    var printWin = window.open('','','width=340,height=260'); 
    printWin.document.open(); 
    printWin.document.write(windowContent); 
    printWin.document.close(); 
    printWin.focus(); 
    printWin.print(); 
    printWin.close(); 
}

來源

2013-06-12 08:32:54 Raza

它不適合我。它給了我一個打印對話框，而不是默默地打印到默認打印機 – daehaai

@PreyashDesai如果我沒有記錯，當使用javascript打印時，打印對話框將始終顯示在打印之前以提示用戶。 –

很有意思！但對於我的代碼，當它到達printWin.document.open（）;我得到這個錯誤：無法讀取未定義的屬性「打開」。 printWin.document未定義 – Besat

我很快搜索了這個，發現這個link。它給出了一個關於如何做的簡要教程，但基本上你得到一個參考網址：toDataURL()，然後創建一個大小相同的img，並將其src分配給url。

它提供了一個更好的一步一步在你的HTML和CSS做什麼，所以只要看看link，如果你不明白我說什麼。

注意：我認爲您無法與畫布進行交互以進行打印，但是如果您在打印機驅動程序中遇到問題，那麼這可能對您沒有用處。

來源

2012-10-10 00:08:44

toDataURL（），給我們從畫布的圖像數據。我想直接發送到打印機。 – Derin

我知道，但你可以暫時創建一個圖像，然後打印該圖像。然後你可以刪除圖像。我不知道有什麼辦法可以直接用畫布做這件事，所以這是一個圍繞 –

好的工作，這是一個工作。但我們如何將圖像靜靜地保存到硬盤位置？以及如何將該圖像發送到打印機？一些代碼行將不勝感激。 – Derin

我發現，我第一次印刷，畫布是空白的。我添加了一個事件監聽器來等待圖像/文檔加載。現在畫布已準備好每次打印。以下是適用於我的代碼：

const dataUrl = document.getElementById('the-pdf-canvas').toDataURL(); 

let windowContent = '<!DOCTYPE html>'; 
windowContent += '<html>'; 
windowContent += '<head><title>Print canvas</title></head>'; 
windowContent += '<body>'; 
windowContent += '<img src="' + dataUrl + '">'; 
windowContent += '</body>'; 
windowContent += '</html>'; 

const printWin = window.open('', '', 'width=' + screen.availWidth + ',height=' + screen.availHeight); 
printWin.document.open(); 
printWin.document.write(windowContent); 

printWin.document.addEventListener('load', function() { 
    printWin.focus(); 
    printWin.print(); 
    printWin.document.close(); 
    printWin.close();    
}, true);

來源

2017-05-18 23:34:34

快速打印HTML5畫布

回答

相關問題