How do you print from a popup window in javascript?

.net javascript printing popup

35,000

Solution 1

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.

Solution 2

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.

Solution 3

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" />

Solution 4

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>

Solution 5

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>

View more solutions

35,000

Author by

sglantz

Updated on May 01, 2020

Comments

sglantz about 4 years
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>
```