Geek Answers Handbook

How do you print from a popup in javascript?

I have a .Net application that dynamically creates a small HTML page and pulls it out in a new window using the javascript document.open method. Everything with this functionality works fine.

Now I want to add a button to the HTML page that prints the page. I 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 a button is clicked, nothing happens in the popup window. But when the source code of this page is saved and loaded in the browser as a separate page, the print button works fine. So it seems like the problem is that the code is in a popup. [Now the problem is that the code is written in a popup after it opens.] Does anyone know a way to fix this problem or any alternatives?

EDIT:

Another method that I 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 working for IE?

EDIT AGAIN:

Below is a test case using npup code. Instead of the code for a pop-up window living in a separate html file, I open an empty URL and then write the code. This step seems to be 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>
+6
javascript printing popup
source share
9 answers

I solved the problem by creating an empty HTML page with standard HTML markup. Then I added the content by creating a new DOM element and editing innerHTML. The resulting code is the same as in the example, simply replacing the newWin.document.write command as follows:

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

As long as the problem is resolved, I honestly don’t know what the exact cause of the problem was. If anyone has any ideas, I would be happy to hear them.

+1
source share

Here is the 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 am not 100% sure why this works, but I think this is due to one of the following: (1) IE security problem, (2) area problem (that is, after creating a new document IE is confused which document to print) or (3) synchronization problem - the document is not yet ready to “accept” the print command. In any case, after a reboot, the print dialog appears without problems.

+8
source share

Perhaps this is because you are returning false in the onclick event of the anchor tag.

Try the following:

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

You can try:

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

or

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

But this may not work in MSIE due to limitations in the Script with multiple frames . The best way to do this, I think, is to place the print button in the main window.

 <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>
+1
source share

There should be something more than the code shown. I think it is working fine (now tested).

Here is a small example. Try it in the settings and see what happens! My test passed under Windows Vista, IE7 and 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>
+1
source share

You forgot:

 newWin.document.close();

The document must be closed before it can be printed.

+1
source share

This works in 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
source share

If you want to print what is in the window that opens, I suggest you use

 window.opener.print();

in a popup window.

0
source share

I wanted to create a printable version of the page, which then automatically prints, so what I came up with seems to work fine 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(); };
0
source share

More articles:


All Articles