logo标签列表

如何在JavaScript中从弹出窗口打印？

.netjavascriptprintingpopup
6
我有一个.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中无效。有什么解决方法吗？

再次编辑：

这里是一个测试用例，使用npup在下面发布的代码。与弹出窗口的代码存储在单独的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>
9个回答
8
这是我用过的解决方案：

以下是具体步骤：

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)时间问题-文档尚未准备好“接受”打印命令。无论如何，在重新加载后，打印对话框就会出现，没有问题。

3
可能是由于您在锚点标签的onclick事件中执行了return false导致的。
尝试这样做：
<input type="button" onclick="window.print()" value="Print" />
你尝试过从弹出窗口中运行代码吗？这似乎是问题的原因。 - sglantz
是的，我的打印按钮在弹出窗口内！当我点击打印按钮时，它会打开对话框以选择打印机。 - azamsharp
你用的是什么浏览器？我刚在Firefox中测试了该网站，它可以正常工作。但在IE 7中仍然无法正常工作。 - sglantz
我正在使用FF和IE8。我听说IE7是一坨垃圾！它充满了漏洞。 - azamsharp
在哪里编写将要打印的内容？ - Muhammed Refaat
显示剩余3条评论
1

你可以尝试以下方法：

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

或者：

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

但由于跨框架脚本的限制，这在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代码后台生成的。 - sglantz
很抱歉给你带来不好的消息。如果是我，在生成打开弹出窗口的按钮/链接的代码中，我会创建两个。一个是“显示结果”，另一个是“打印结果”或其他名称… - ghoppe
看起来我可能不得不朝那个方向前进，但我还没有放弃。 - sglantz
1

这里面肯定有比展示的代码更多的东西。我认为它运行良好（现在一直在测试）。

这是一个微小的测试用例。在您的设置中尝试并查看发生了什么！我的检查是在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写入其中。我将使用您的代码更新问题，并提供一个测试案例，仍然会导致问题。 - sglantz
1

我通过创建一个带有标准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);

虽然问题已经解决了，但我真的不确定问题的确切原因。如果有人有任何想法，我很乐意听取。

1
这在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>
1

你忘记了：

newWin.document.close();

必须在打印前关闭文档才能让 MSIE 打印。

0
如果你想打印从你打开的窗口中获取的内容，我建议你使用：
window.opener.print();

在弹出窗口中。

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

我想创建一个页面的打印友好版本，然后自动打印，这就是我想出来的方法，对我来说似乎非常有效！

 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();
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接