快速打印 HTML5 画布答案

【问题标题】：Quick Print HTML5 Canvas快速打印 HTML5 画布
【发布时间】：2012-09-30 08:54:20
【问题描述】：

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

任何人都可以给出提示。

Javascript 或 jQuery。

【问题讨论】：

您有什么问题？打印图像还是从画布上获取图像？或两者？请更具体。另外，到目前为止，您尝试过什么？
toDataURL()，给我们画布上的图像数据。我想直接发送到打印机。

标签： javascript jquery html canvas

【解决方案1】：

我搜索了很多并找到了一个完美的解决方案:) 使用 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();
}

【讨论】：

它对我不起作用。它给了我一个打印对话框，而不是静默打印到默认打印机
@PreyashDesai 如果我没记错的话，使用 javascript 打印时，打印对话框总是会在打印前显示以提示用户。
非常有趣！但是对于我的代码，当它到达 printWin.document.open();我收到此错误：无法读取未定义的属性“打开”。 printWin.document 未定义
这是我需要的，但要小心！我的页面有一个非常缓慢的加载图像。 printWin.print() 可以在页面加载之前调用。最好在创建页面的head 中添加一点javascript：window.onload = function () { window.print(); window.close();} 并在此示例中删除最后两个语句。
此解决方案不起作用。快速打开一个弹出窗口，仅此而已。

【解决方案2】：

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

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);

【讨论】：

这应该是 Chrome 的正确答案。
我什么也没发生。打印对话框永远不会打开。我尝试在负载监听器中放置一个断点，但它不会到达它。

【解决方案3】：

使用printJS 和这一行：

printJS({printable: document.querySelector("#your-canvas").toDataURL(), type: 'image', imageStyle: 'width:100%'});

【讨论】：

太棒了。它只花了我 3 行。第一个用于脚本导入，第二个用于使用 CDN 导入样式，然后第三个衬垫在答案中。做得好。我在这里和那里尝试了很多答案，但没有任何运气，花了大约 4 个小时来做一些关于这个主题的更多定制任务，但最终得到了正确的答案。非常感谢！

【解决方案4】：

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

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

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

【讨论】：

toDataURL()，给我们画布上的图像数据。我想直接发送到打印机。
我知道，但您可以临时创建一个图像，然后打印该图像。然后你可以删除图像。我不知道有什么方法可以直接用画布做到这一点，所以这是一个解决方法
好的，这是一种解决方法。但是我们如何将图像静默保存到硬盘位置呢？以及如何将该图像发送到打印机？几行代码将不胜感激。