快速打印HTML5画布

Question

快速打印HTML5画布

javascriptjqueryhtmlcanvas

12

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

有人能给个提示吗？

使用Javascript或jQuery。

- Derin

3

你遇到了什么问题？是打印图像还是从画布获取图像？还是两者都有问题？请更具体地描述。另外，你已经尝试了什么？ - Felix Kling

toDataURL()，可以从画布中获取图像数据。我想直接将其发送到打印机。 - Derin

6个回答

26

我发现第一次打印时，画布是空白的。我添加了一个事件监听器，等待图像/文档加载完成后再进行打印。现在每次画布都已经准备好进行打印。以下是适用于我的代码：

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

- Martin McCaulley

对我来说什么都没有发生。打印对话框从未打开过。我尝试在加载监听器内设置断点，但它无法到达。 - Elizandro - SparcBR

@Elizandro-SparcBR 请先关闭窗口，然后再打印。同时删除 close printWin.close(); 这一行代码。希望能有所帮助。 - Abhishek

7

使用printJS和这条简单的命令：

printJS

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

- Paweł Moskal

2

太棒了。只用了三行代码。第一行是脚本导入，第二行是使用CDN导入样式，然后第三行就是答案了。做得很好。我在这里尝试了很多答案，但都没有成功，在这个主题上花了大约4个小时来完成一些更定制化的任务，但最终找到了正确的答案。非常感谢！ - xdevx32

1

更新 @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);

- Abhishek

0

我快速谷歌了一下，找到了这个link。它提供了一个简要的教程，告诉你如何做，但基本上你需要使用toDataURL()获取一个参考URL，然后创建一个相同大小的img，将其src分配给该URL。

它提供了更好的逐步说明，告诉你在html和css中应该怎么做，所以如果你不明白我说的话，就看看link。

注意：我假设你在与画布交互以打印时遇到了问题，但如果你遇到了打印机驱动程序的问题，则这可能对你没有用。

- Tom Prats

toDataURL()，可以从画布中获取图像数据。我想直接将其发送到打印机。 - Derin

我知道，但你可以暂时创建一个图像，然后打印该图像。然后你可以删除这个图像。我不知道有什么直接使用画布来完成这个任务的方法，所以这需要一些变通。 - Tom Prats

1

好的，那是一个解决方法。但是我们如何将图像静默保存到硬盘位置？以及如何将该图像发送到打印机？几行代码将不胜感激。 - Derin

0

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

}

- Walid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raza · Accepted Answer

我进行了大量搜索，并找到了一个完美运作的解决方案 :) 使用了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();
}