Javascript 快速打印 HTML5 画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12809971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Quick Print HTML5 Canvas
提问by Derin
I want to send/print the canvas image directly to the default printer. That means a quick printing.
我想将画布图像直接发送/打印到默认打印机。这意味着快速打印。
Anyone can give a hint.
任何人都可以给出提示。
Javascript or jQuery.
Javascript 或 jQuery。
回答by Raza
I have searched alot and found a solution which works perfectly :) Used onclickevent
我搜索了很多，找到了一个完美的解决方案:) 使用了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();
}
回答by Martin McCaulley
I found that the first time I printed, the canvas was blank. I added an event listener to wait until the image/document is loaded. Now the canvas is ready to print each time. Here's the code which is working for me:
我发现我第一次打印时，画布是空白的。我添加了一个事件监听器来等待图像/文档被加载。现在画布已准备好每次打印。这是对我有用的代码：
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);
回答by Pawe? Moskal
回答by Tom Prats
I quickly googled this and found this link. It gives a breif tutorial on how to do it, but essentially you get a reference url with: toDataURL()and then create an img with the same size, assigning its src to the url.
我很快用谷歌搜索了这个并找到了这个链接。它提供了有关如何执行此操作的 breif 教程，但本质上您可以通过以下方式获得参考 url：toDataURL()然后创建一个具有相同大小的 img，将其 src 分配给该 url。
It gives a better step by step of what to do in your html and css, so just look at the linkif you don't understand what i said.
它提供了一个更好的一步一步如何在你的 html 和 css 中执行的操作，所以如果你不明白我说的内容，请查看链接。
Note: I assumed you were having trouble interacting with the canvas to print, but if instead you are having trouble with the printer driver then this is probably of no use to you.
注意：我假设您在与画布交互进行打印时遇到问题，但如果您在打印机驱动程序方面遇到问题，那么这可能对您没有用。
