Question

在我的网站上，我想创建用于打印各种图像的按钮。我知道这可以使用Javascript实现。经过一些研究，我写了这个：

<script type="text/javascript">
var pwin;
function printImg(imgSrc) {
    pwin = window.open(imgSrc, "_blank");
    setTimeout("pwin.print()", 20);
}
</script>
...
<input class="printAndSolve" type="submit" value="Print"
onclick="printImg('original.png')">

这将在新选项卡中打开图像，但不显示打印对话框。我做错了什么？

进一步的研究导致了一种不同的方法：

<script type="text/javascript">
function printImg(imgSrc) {
    var printWindow = window.open('', 'Print
    Window','height=400,width=600');
    printWindow.document.write('<html><head><title>Print Window</title>');
    printWindow.document.write('</head><body ><img src=\'');
    printWindow.document.write(imgSrc);
    printWindow.document.write('\' /></body></html>');
    printWindow.document.close();
    printWindow.onload = function() { printWindow.print(); };
}
</script>
...
<input class="printAndSolve" type="submit" value="Print"
onclick="printImg('original.png')">

这给了我一个奇怪的结果。尝试打印小图像时，会弹出打印对话框。但是当我尝试打印更大的图像（覆盖整张A4纸）时，对话框不会弹出。到底是怎么回事？

考虑到我希望实现的目标，你们会说最好的方法是什么？

提前致谢！

修改

这实际上似乎是与浏览器相关的问题。上面的代码在Firefox和IE中运行得非常好。我有这个问题，因为我正在开发Chrome网站。显然Chrome在显示打印窗口之前不会等待我的窗口内容加载。其他浏览器似乎都先等待内容加载，然后显示打印窗口。我当然尝试使用函数setTimeout但没有成功。我的问题是，有人能告诉我在Chrome中打印图像的解决方法吗？

解决

这个网站被证明是黄金：http://nice-tutorials.blogspot.se/2014/01/image-printing-problem-in-google-chrome.html

问题解决了！

Answer 1

解决方案是将onLoad事件添加到body标签：

printWindow.document.write('</head><body onLoad="self.print(); self.close()"><img src=\'');

使用Javascript在Chrome中打印图像

1 个答案: