Question

我有一个.Net应用程序，它动态创建一个小的HTML页面，并使用javascript document.open方法在新窗口中弹出它。具有该功能的一切都运行良好。

现在我想在打印页面的HTML页面上添加一个按钮。我尝试使用以下代码无济于事：

<a href='print.html' onClick='window.print();return false;'>
<img src='images/printer.png' height='32px' width='32px'></a>

在弹出窗口中单击按钮时，没有任何反应。但是，当保存此页面的源代码并将其作为单独页面加载到浏览器中时，打印按钮可以正常工作。 ~~所以看起来这个问题是由代码在弹出窗口中引起的。~~ [现在的问题似乎是打开窗口后写入弹出窗口的代码。]有没有人知道解决这个问题或任何替代方法的方法？

编辑：

我尝试过的其他方法也有相同的结果：

<input type='button' onclick='window.print()' value='Print' />

和

<a href='javascript:window.print()'>
<img src='images/printer.png' height='32px' width='32px'></a>

再次编辑：

以上代码适用于Firefox，但不适用于IE7。有关解决IE的任何想法吗？

再次编辑：

以下是使用下面npup posted的代码的测试用例。而不是弹出窗口的代码生活在一个单独的html文件中，我打开一个空白的URL，然后编写代码。这一步似乎是造成问题的原因。

<html>
<head>
    <title>main</title>
</head>
<body>
    <h1>
        Pop & print</h1>
    <button onclick="pop();">
        Pop</button>

    <script type="text/javascript">
      var POP;
      function pop() {
          var newWin = window.open('', 'thePopup', 'width=350,height=350');
        newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" +
            "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
            "<img src='images/printer.png' height='32px' width='32px'></a></body></html>");
      }
    </script>

</body>
</html>

Answer 1

这是一个对我有用的解决方案：

newWin.document.write( newhtml );
newWin.window.location.reload();    // this is the secret ingredient
newWin.focus();                     // not sure if this line is necessary
newWin.print();

我不是百分之百确定为什么会这样，但我认为它与以下之一有关：（1）IE安全问题，（2）范围问题（即创建新文档后，IE是对于要打印的文档感到困惑，或者（3）计时问题 - 文档尚未准备好'接受'打印命令。在任何情况下，重新加载后，打印对话框都会出现问题。

Answer 2

可能是因为您在锚标记的onclick事件中返回false。

试试这个：

<input type="button" onclick="window.print()" value="Print" />

Answer 3

您可以尝试：

<input type="button" onclick="self.print()" value="Print" />

或：

<input type="button" onclick="window.focus();window.print()" value="Print" />

但由于Cross-Frame Scripting的限制，这在MSIE中可能不起作用。我认为，最好的方法是将打印按钮放在主窗口上。

<script language="javascript">
    var winref = window.open('print.html','windowName','width=400,height=400');
</script>

<form>
    <input type="button" value="Print Popup" onclick="if (window.print) winref.print()">
</form>

Answer 4

除了显示的代码之外，必须有更多内容。我认为它工作正常（现在正在测试一些）。

这是一个微不足道的测试案例。在您的设置中尝试它，看看会发生什么！我的检查是在Windows Vista，IE7和IE8下进行的。

main.html：

<html>
    <head>
    <title>main</title>
    </head>
    <body>

    <h1>Pop & print</h1>
    <button onclick="pop();">Pop</button>
    <script type="text/javascript">
      var POP;
      function pop() {
        POP = window.open('popup.html', 'thePopup', 'width=350,height=350');
      }
    </script>

    </body>
  </html>

popup.html：

<html>
    <head>
    <title>popup</title>
    </head>
    <body>

    <h1>Pop</h1>
    <p>Print me</p>
    <a href="print.html" onclick="window.print();return false;">
        <img src="images/printer.png" height="32px" width="32px">
    </a>

    </body>
  </html>

Answer 5

我通过创建带有标准HTML标记的空白HTML页面解决了这个问题。然后我通过创建一个新的DOM元素并编辑innerHTML来添加内容。生成的代码与示例中的代码相同，只需使用以下代码替换newWin.document.write命令：

var newDiv = newWin.document.createElement( 'div' );
newDiv.innerHTML = "<h1>Pop</h1>" +
        "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
        "<img src='images/printer.png' height='32px' width='32px'></a>"
newWin.document.body.appendChild(newDiv);

虽然问题已经解决，但老实说我不确定问题的确切原因是什么。如果有人有任何想法，我会很高兴听到他们。

Answer 6

你忘记了：

newWin.document.close();

文件必须在msie打印之前关闭。

Answer 7

适用于Chrome：

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>

Answer 8

如果您要打印从打开的窗口中的内容，我建议您使用

window.opener.print();

在弹出窗口中。

Answer 9

我想创建一个打印机友好版本的页面然后自动打印，这就是我想出的，似乎对我很有用！

 function printPage(){
  var w = window.open();

  var headers =  $("#headers").html();
  var field= $("#field1").html();
  var field2= $("#field2").html();

  var html = "<!DOCTYPE HTML>";
    html += '<html lang="en-us">';
    html += '<head><style></style></head>';
    html += "<body>";

    //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
    //This allows you to reuse this on lots of pages with the same template
    if(headers != null) html += headers + "<br/><br/>";
    if(field != null) html += field + "<br/><br/>";
    if(field2 != null) html += field2 + "<br/><br/>";

    html += "</body>";
    w.document.write(html);
    w.window.print();
    w.document.close();
};

如何从javascript中的弹出窗口打印？

9 个答案: