我想将画布图像直接发送/打印到默认打印机。这意味着快速打印。任何人都可以给予一个提示。Javascript或jQuery。
v1l68za41#
我发现我第一次打印时，画布是空白的。我添加了一个事件侦听器来等待图像/文档加载。现在画布每次都准备好打印了。下面是对我有用的代码：
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);
eoxn13cs2#
使用printJS和这一行：
printJS({printable: document.querySelector("#your-canvas").toDataURL(), type: 'image', imageStyle: 'width:100%'});
e1xvtsh33#
更新了@Martin的回答。
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.document.close(); printWin.print(); }, true);
q35jwt9p4#
我很快在谷歌上搜索了一下，找到了这个link。它提供了一个如何做到这一点的简短教程，但基本上你会得到一个参考网址：toDataURL()，然后创建一个相同大小的img，将其src分配给url。它给出了一个更好的一步一步在你的html和css中做什么，所以如果你不明白我说的话，就看看link。注意：我假设您在与画布交互以进行打印时遇到了问题，但如果您在打印机驱动程序方面遇到了问题，那么这可能对您没有任何用处。
toDataURL()
oxcyiej75#
正如Martin Macauley的回答，但对于移动的chrome，它不能正常工作，因为你只需要在“setTimeout”函数中关闭文档
function PrintPDFFunc(ID){ const dataUrl = document.getElementById(ID).toDataURL(); let windowContent = '<!DOCTYPE html><html><head><title>Print</title></head><body><img src="' + dataUrl + '"></body></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(); setTimeout(function(){ printWin.document.close(); printWin.close(); },901); },true);
}
cfh9epnr6#
我已经搜索了很多，并找到了一个完美的解决方案：）使用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(); }
6条答案
按热度按时间v1l68za41#
我发现我第一次打印时，画布是空白的。我添加了一个事件侦听器来等待图像/文档加载。现在画布每次都准备好打印了。下面是对我有用的代码：
eoxn13cs2#
使用printJS和这一行：
e1xvtsh33#
更新了@Martin的回答。
q35jwt9p4#
我很快在谷歌上搜索了一下，找到了这个link。它提供了一个如何做到这一点的简短教程，但基本上你会得到一个参考网址：
toDataURL()，然后创建一个相同大小的img，将其src分配给url。它给出了一个更好的一步一步在你的html和css中做什么，所以如果你不明白我说的话，就看看link。
注意：我假设您在与画布交互以进行打印时遇到了问题，但如果您在打印机驱动程序方面遇到了问题，那么这可能对您没有任何用处。
oxcyiej75#
正如Martin Macauley的回答，但对于移动的chrome，它不能正常工作，因为你只需要在“setTimeout”函数中关闭文档
}
cfh9epnr6#
我已经搜索了很多，并找到了一个完美的解决方案：）使用onclick事件