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

我有一个.Net应用程序，它动态地创建一个小的HTML页面，并使用javascript document.open方法在新窗口中弹出它。所有与该功能的工作正常。如何从JavaScript中的弹出窗口打印？

现在我想添加一个按钮到打印页面的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浏览器？

EDIT再次：

下面是使用代码低于npup posted测试用例。而不是弹出窗口的代码生活在一个单独的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() { 
      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>

来源

2010-03-15 sglantz

我已经用标准的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);

尽管这一问题已经解决了，我真的不知道是什么的确切原因问题。如果有人有任何想法，我会很高兴听到他们。

来源

2010-03-31 14:59:35 sglantz

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

试试这个：

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

来源

2010-03-15 16:44:18 azamsharp

这有相同的结果，工作在一个单独的浏览器窗口，而不是从一个弹出。 – sglantz 2010-03-15 16:55:00

嗯！当我点击该按钮时，打开打印机堆栈供我选择打印机。你有打印机吗？也许它无法找到打印机？但无论如何它应该打开打印机选择框。 – azamsharp 2010-03-15 17:09:59

您是否尝试使用弹出窗口中的代码？这似乎是导致问题的原因。 – sglantz 2010-03-15 18:31:25

你可以试试：

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

或：

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

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

<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>

来源

2010-03-15 17:24:05 ghoppe

前两种方法都不起作用。第三种方法并不理想，并且变得更加复杂，因为HTML页面的代码是基于各种参数从后面的.Net代码生成的。 – sglantz 2010-03-15 18:30:15

对不起，是坏消息的持有者。如果是我，在生成打开弹出窗口的按钮/链接的代码中，我会创建两个。 “显示结果”和“打印结果”或其他... – ghoppe 2010-03-15 19:08:58

看起来我可能不得不这样做，但我还没有放弃。 – sglantz 2010-03-15 20:11:39

如果你想打印什么在你打开窗口，我建议你在弹出的使用

window.opener.print();

。

来源

2010-03-15 18:04:01 npup

我正在寻找打印弹出窗口的内容，而不是主窗口。 – sglantz 2010-03-15 18:20:16

* Doh *，非常抱歉。 – npup 2010-03-17 08:49:32

必须有比它显示的代码更多的东西。我认为它工作正常（现在正在测试一些）。

这里是一个小小的测试用例。试试你的设置，看看会发生什么！我的检查是在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>

来源

2010-03-17 08:46:13 npup

此代码在我的设置中可以正常工作，但它并不完全适用于我的问题。主要区别在于我在运行时为弹出窗口生成了html代码。因此，我打开一个空白窗口，然后写入html。我将使用您的代码更新问题，测试用例仍然会导致问题。 – sglantz 2010-03-17 13:08:00

你忘了：

newWin.document.close();

文件必须被关闭之前MSIE可以打印。

来源

2010-07-18 11:51:30 Roose

这里是为我工作的解决方案：

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）计时问题 - 文档尚未准备好“接受”打印命令。在任何情况下，重新加载后，打印对话框都会出现问题。

来源

2012-03-02 14:35:04

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

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(); 
};

来源

2013-04-19 15:38:55

此作品在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>

来源

2014-04-30 18:22:34

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

回答

相关问题