11

我想将画布图像直接发送/打印到默认打印机。这意味着快速打印。

任何人都可以给出提示。

Javascript 或 jQuery。

4

4 回答 4

32

我已经搜索了很多并找到了一个完美的解决方案:) 使用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-12T08:32:54.160 回答
23

我发现第一次打印时，画布是空白的。我添加了一个事件侦听器来等待图像/文档被加载。现在画布已准备好每次打印。这是对我有用的代码：

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-18T23:34:34.947 回答
6

使用printJS和这一行：

printJS({printable: document.querySelector("#your-canvas").toDataURL(), type: 'image', imageStyle: 'width:100%'});
于 2020-04-07T08:45:20.327 回答
0

我很快用谷歌搜索并找到了这个链接。它提供了一个关于如何做到这一点的简要教程，但基本上你会得到一个参考 url：toDataURL()然后创建一个相同大小的 img，将其 src 分配给 url。

它提供了在您的 html 和 css 中执行的操作的一个更好的步骤，因此如果您不明白我所说的内容，请查看链接。

注意：我假设您在与要打印的画布交互时遇到问题，但如果您在打印机驱动程序方面遇到问题，那么这可能对您没有用处。

于 2012-10-10T00:08:44.297 回答