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

【问题标题】：How do you print from a popup window in javascript?如何从 javascript 的弹出窗口中打印？
【发布时间】：2010-03-15 16:22:30
【问题描述】：

我有一个 .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>

【问题讨论】：

标签： .net javascript printing popup

【解决方案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();

我不能 100% 确定为什么会这样，但我认为这与以下情况之一有关：(1) IE 安全问题，(2) 范围问题（即在创建新文档后，IE对打印哪个文档感到困惑），或 (3) 时间问题 - 文档尚未准备好“接受”打印命令。无论如何，重新加载后打印对话框出现没有问题。

【讨论】：

【解决方案2】：

这可能是因为您在锚标记的 onclick 事件中执行了 return false。

试试这个：

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

【讨论】：

这具有相同的结果，可以在单独的浏览器窗口中运行，但不能从弹出窗口中运行。
嗯！当我单击该按钮时，它会打开打印机堆栈供我选择打印机。你有连接打印机吗？也许它无法找到打印机？但无论如何它应该打开打印机选择框。
您是否尝试过弹出窗口中的代码？这似乎是导致问题的原因。
是的，我的打印按钮在弹出窗口中！当我单击打印按钮时，它会打开对话框以选择打印机。
你用的是什么浏览器？我刚刚在 Firefox 中测试了该站点并且它工作正常。但在 IE 7 中仍然不行。

【解决方案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>

【讨论】：

前两种方法都不起作用。第三种方法不太理想，而且比较复杂，因为HTML页面的代码是由后面的.Net代码根据各种参数生成的。
很抱歉成为坏消息的承担者。如果是我，在生成打开弹出窗口的按钮/链接的代码中，我会创建两个。 “显示结果”和“打印结果”之类的……
看起来我可能不得不朝那个方向前进，但我还没有放弃。

【解决方案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>

【讨论】：

此代码在我的设置中有效，但并不完全适用于我的问题。主要区别在于我在运行时为弹出窗口生成 html 代码。因此，我打开一个空白窗口，然后将 html 写入其中。我将使用仍然导致问题的代码使用测试用例更新问题。

【解决方案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);

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

【讨论】：

【解决方案6】：

你忘记了：

newWin.document.close();

必须先关闭文档，然后 msie 才能打印它。

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

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

window.opener.print();

在弹出窗口中。

【讨论】：

我希望打印弹出窗口的内容，而不是主窗口。

【解决方案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();
};

【讨论】：