快速打印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画布

回答

相关问题