Javascript 你如何从javascript中的弹出窗口打印？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2448676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you print from a popup window in javascript?
提问by sglantz
I have a .Net application that dynamically creates a small HTML page and pops it up in a new window using the javascript document.open method. Everything with that functionality is working fine.
我有一个 .Net 应用程序，它动态创建一个小的 HTML 页面，并使用 javascript document.open 方法将它弹出到一个新窗口中。具有该功能的一切工作正常。
Now I want to add a button to the HTML page that prints the page. I have tried using the following code to no avail:
现在我想向打印页面的 HTML 页面添加一个按钮。我尝试使用以下代码无济于事：
<a href='print.html' onClick='window.print();return false;'>
<img src='images/printer.png' height='32px' width='32px'></a>
When the button is clicked in the popup window, nothing happens. But when the source code of of this page is saved and loaded in a browser as a separate page, the print button works perfectly. So it would appear that the problem is caused by the fact that the code is in a popup window.[The problem now appears to be that the code in written to the popup window after it is opened.] Does anyone know a way to fix this problem or any alternatives?
在弹出窗口中单击该按钮时，没有任何反应。但是当这个页面的源代码作为一个单独的页面被保存并加载到浏览器中时，打印按钮就完美了。 所以看起来问题是由代码在弹出窗口中引起的。[现在的问题似乎是弹出窗口打开后写入的代码。] 有没有人知道解决这个问题的方法或任何替代方法？
EDIT:
编辑：
Other method that I have tried with the same results:
我尝试过的其他方法具有相同的结果：
<input type='button' onclick='window.print()' value='Print' />
and
和
<a href='javascript:window.print()'>
<img src='images/printer.png' height='32px' width='32px'></a>
EDIT AGAIN:
再次编辑：
The above code works in Firefox, but not in IE7. Any ideas on a work around for IE?
上面的代码在 Firefox 中有效，但在 IE7 中无效。关于 IE 解决方法的任何想法？
EDIT YET AGAIN:
再次编辑：
Here is a test case using the code that npuppostedbelow. Instead of the code for the popup window living in a separate html file, I am opening a blank url and then writing the code to it. This step appears to be what is causing the problem.
这是一个使用npup在下面发布的代码的测试用例。我打开一个空白 url，然后将代码写入其中，而不是将弹出窗口的代码保存在单独的 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>
采纳答案by sglantz
I have solved the problem by creating a blank HTML page with the standard HTML markup. I then added the content by creating a new DOM element and editing the innerHTML. The resulting code is the same as in the example, simply replacing the newWin.document.write command with the following:
我通过创建一个带有标准 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);
While the issue has been resolved, I am honestly not sure what was the exact cause of the problem. If anyone has any ideas, I would be glad to hear them.
虽然问题已经解决，但老实说，我不确定问题的确切原因是什么。如果有人有任何想法，我会很高兴听到他们。
回答by Mark Pruce
Here is a solution that worked for me:
这是一个对我有用的解决方案：
newWin.document.write( newhtml );
newWin.window.location.reload(); // this is the secret ingredient
newWin.focus(); // not sure if this line is necessary
newWin.print();
I'm not 100% sure why this works but I think it has to do with one of the following: (1) an IE security issue, (2) a scope issue (i.e. after creating a new document, IE is confused about which document to print), or (3) a timing issue - the document is not ready to 'accept' a print command yet. In any case, after the reload the print dialogue appears without a problem.
我不是 100% 确定为什么会这样，但我认为它与以下之一有关：(1) IE 安全问题，(2) 范围问题（即在创建新文档后，IE 对哪个要打印的文档），或 (3) 时间问题 - 文档尚未准备好“接受”打印命令。无论如何，重新加载后，打印对话框出现没有问题。
回答by azamsharp
It might be because you are doing a return false in the onclick event of the anchor tag.
这可能是因为您在锚标记的 onclick 事件中执行 return false 。
Try this:
尝试这个：
<input type="button" onclick="window.print()" value="Print" />
回答by ghoppe
You can try:
你可以试试：
<input type="button" onclick="self.print()" value="Print" />
or:
或者：
<input type="button" onclick="window.focus();window.print()" value="Print" />
But this might not work in MSIE due to restrictions in Cross-Frame Scripting. The best way to do this, I think, is to put the print button on the main window.
但由于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>
回答by npup
There must be something more to it than the code shown. I think it works fine (been testing some now).
一定有比显示的代码更多的东西。我认为它工作正常（现在正在测试一些）。
Here's a miniscule test case. Try it in your setup and see what happens! My checking was under Windows Vista, IE7 and IE8.
这是一个很小的测试用例。在您的设置中尝试一下，看看会发生什么！我的检查是在 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：
<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>
回答by Roose
You forgot the:
你忘记了：
newWin.document.close();
Document must be closed before msie can print it.
必须先关闭文档，然后 msie 才能打印它。
回答by DD.
This works in Chrome:
这适用于 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>
回答by Daryl H
I wanted to create a printer friendly version of a page that then automatically printed, this is what I came up with, seems to work great for me!
我想创建一个页面的打印机友好版本，然后自动打印，这就是我想出的，似乎对我来说很棒！
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();
};
回答by npup
If you want to print what's in the window you opened from, i suggest you use
如果你想打印什么在你打开窗户从，我建议你使用
window.opener.print();
in the popup.
在弹出窗口中。
