使用JavaScript和Google Chrome创建并打开新窗口和打印图像

时间:2014-01-03 12:22:07

标签: javascript html css google-chrome

当我尝试使用JavaScript的window.print()打开并打印窗口时,图像在打印时不会显示在Chrome中。我的代码如下:

<html>
<head>
<script type="text/javascript">
  function openWin()
  {
    var myWindow = window.open('','', 'width=200,height=100');

    myWindow.document.write("<p>This is 'myWindow'</p>");
    myWindow.document.write("<p><img src='https://www.google.gr/images/srpr/logo11w.png' width='400' /></p>");

    myWindow.document.close();
    myWindow.focus();
    myWindow.print();
    myWindow.close();

 }
</script>
</head>
<body>

<input type="button" value="Open window" onclick="openWin()" />

</body>
</html>

你可以在这里查看http://jsfiddle.net/Q5Xc9/649/ 怎么解决这个问题?

1 个答案:

答案 0 :(得分:4)

在调用print()时尚未加载图像。

您需要将调用延迟到print,直到图像加载完毕。 jQuery可以这样做,所以你可以在页面中包含jquery,然后用这样的代码将调用包装到print

function openWin()
{
    var myWindow = window.open('','','width=500,height=500');
    myWindow.document.write("<p>This is 'myWindow'</p>");
    myWindow.document.write("<p><img src='https://www.google.gr/images/srpr/logo11w.png' width='400' /> </p>");

    myWindow.document.write("<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>");
    myWindow.document.write("<script>$(window).load(function(){ print(); });</script>");
}