tags:

views:

572

answers:

6
+1  Q: 

How do you print from a popup window in javascript?

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

It might be because you are doing a return false in the onclick event of the anchor tag.

Try this: 

<input type="button" onclick="window.print()" value="Print" />
azamsharp  2010-03-15 16:44:18
This had the same result, works in a separate browser window but not from a popup.
sglantz  2010-03-15 16:55:00
Hmm! When I click the button it opens up the printer stack for me to select the printer. Do you have printers attached? Maybe it is not able to find the printers? But anyhow it should open the printer selection box.
azamsharp  2010-03-15 17:09:59
Did you try the code from a popup window? That seems to be what is causing the problem.
sglantz  2010-03-15 18:31:25
yes my print button is inside the popup window! when I click the print button it opens the dialog to select the printer.
azamsharp  2010-03-15 19:02:06
What browser are you using? I just tested the site in Firefox and it worked. But still no go in IE 7.
sglantz  2010-03-15 20:12:41
I am using FF and IE8. I have heard that IE7 is a piece of crap! It is filled with bugs.
azamsharp  2010-03-15 21:40:53
Sadly, I can't force all my users to use browsers that are up to spec.
sglantz  2010-03-16 18:20:01
A: 

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.

<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>
ghoppe  2010-03-15 17:24:05
Neither of the first two methods worked. The third method is not ideal and made more complicated because the code for the HTML page is generated from the .Net code behind based on various parameters.
sglantz  2010-03-15 18:30:15
Sorry to be the bearer of bad tidings. If it were me, in the code where you generate the button/link that opens the popup, I'd create two. "Show Results" and "Print Results" or whatever…
ghoppe  2010-03-15 19:08:58
It looks like I might have to head that way, but I am not giving up yet.
sglantz  2010-03-15 20:11:39
A: 

If you want to print what's in the window you opened from, i suggest you use

window.opener.print();

in the popup.

npup  2010-03-15 18:04:01
I am looking to print the contents of the popup, not the main window.
sglantz  2010-03-15 18:20:16
*Doh*, very sorry.
npup  2010-03-17 08:49:32
+1  A: 

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.

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>
npup  2010-03-17 08:46:13
This code does work on my setup, but it is not entirely applicable to my problem. The major difference is that I am generating the html code for the popup at runtime. Because of this, I am opening a blank window, then writing the html to it. I will update the question with a test case using your code that still causes the problem.
sglantz  2010-03-17 13:08:00
A: 

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:

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.

sglantz  2010-03-31 14:59:35
A: 

you forgot the:

newWin.document.close();

document must be closed before msie can print it

Roose  2010-07-18 11:51:30

related questions

Subsonic Vs NHibernate
How to check For File Lock in C# ?
Is nAnt still supported and suitable for .net 3.5/VS2008?
Limit size of Queue<T> in .NET?
Viewstate invalid when using Safari
Free OCR library
Unhandled Exception Handler in .NET 1.1
Localising date format descriptors
Get a new object instance from a Type in C#
VFP .NET OLEdb provider does not work in Win 64-Bits. Help
.NET Testing Framework Advice
Embedded Database for .net that can run off a network
Automatically update version number
Homegrown consumption of web services
How do you migrate a large app from VB6 to VB .net ?
.NET Migrations Engine
Adding Scripting functionality to .NET applications
SQLite and XSD
Floating Point Number parsing: Is there a Catch All algorithm?
How do I programmatically create a PDF in my .NET application?
How do I sync the SVN revision number with my ASP.NET web site?
XSD DataSets and ignoring foreign keys
Anatomy of a "Memory Leak"
Reliable Timer in a Console Application
How do I calculate relative time?