Question

26

How do you print from a popup window in javascript?

rated 0 times [ 31] [ 5] / answers: 1 / hits: 35712 / 15 Years ago, mon, march 15, 2010, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alexandreah

Add To Favorites

Follow

Total Points: 720

Total Questions: 85

Total Answers: 90

Location: Central African Republic

Member since Fri, Jun 5, 2020

4 Years ago

answered 15 Years ago kamronr · Accepted Answer

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.