Menu
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.
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:
<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?
EDIT YET AGAIN:
Here is a test case using the code that npup posted below. 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.
<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>
645
To pop-up a print dialog box using JavaScript, use the print() method. With the dialog box, you can easily set the printing options like which printer to select for printing.
You can use the keyboard shortcut Ctrl+P to open the print dialog. You can use the keyboard shortcut Ctrl+P to open the print dialog.
window. print(): The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window, window. print() is used to open the Print Dialog to print the current document.
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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
