Printing a web page using just url and without opening new window?

Question

<html>
<head>
<script type="text/javascript">
    var URL = "http://localhost:8000/foobar/";
    var W = window.open(URL);    **Note1**
    W.window.print(); 

</script>
</head>
<p> Print ME...............</p>
</html>

I am using this script to print a webpage. My views render this page and The JS take care all other things.

But I dont want to open new window for that. So, What should I use instead of window.open(URL) so no new window opens. Similarly, I don't want to open new window for print function.So, Whenever I render this page it do all stuff on the same page. No new window, No new tab. How can I achieve this. I google but nothing seems working.

score 52 · Accepted Answer · edited Aug 23 '14 at 19:03

52

You can do this using a hidden iFrame (I'm using jquery for the example):

function loadOtherPage() {

    $("<iframe>")                             // create a new iframe element
        .hide()                               // make it invisible
        .attr("src", "/url/to/page/to/print") // point the iframe to the page you want to print
        .appendTo("body");                    // add iframe to the DOM to cause it to load the page

}

This will load the page you want to print. To print, you can add javascript code to the print page so that it gets printed after loading:

$(document).ready(function () {
    window.print();
});

This will print the page without showing a new window. I've tested this in IE8,9 and Google Chrome, so I'm not sure if this works for Safari or Firefox, though.

edited Aug 23 '14 at 19:03

Nathan Wallace

2,154
4
23
28

answered Dec 05 '12 at 13:46

andragon

658
7
8

At "/url/to/page/to/print", can I put my html code directly? – Vitor Nov 06 '15 at 12:25
1

@VitorGuerreiro: Yes, the html code of what you want to print should be at that url; that html code should also have the javascript code mentioned in the answer (the one with window.print(); ) – andragon Nov 07 '15 at 17:34
2

Hidden iFrame prints blank page in the latest version of browsers. – Shivakrishna Mar 28 '18 at 08:49
Yes blank page with hide, replace `.hide()` by `.css('visibility', 'hidden')` – Alexis Vandepitte Mar 29 '18 at 08:32
It works with FF – Melroy van den Berg Apr 18 '22 at 00:53

score 11 · Answer 2 · answered May 02 '14 at 00:11

11

There's a nice example on MDN how to do that with a hidden iframe https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it

answered May 02 '14 at 00:11

Klemen Tusar

9,261
4
31
28

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

In reference to @andragon's answer. updated on top of it.

You can do this using an iFrame(Not hidden because hidden iFrame prints the blank page in latest versions of browsers. You can hide after the print is triggered)

function loadOtherPage(link) {
        $("<iframe class='printpage'>") // create a new iframe element
            .attr("src", link) // point the iframe to the page link you want to print
            .appendTo("body");
    }

This will load the page link you want to print. On loading the print page link you can call javascript.

$(document).ready(function () {
        window.print();
    });

    window.onafterprint = function () {
        $('.printpage', window.parent.document).hide();
    }

This will print the page from the same window and onafterprint Event is triggered when a page has started printing, or if the print dialog box has been closed

window.parent.document is to hide the iFrame block on the parent page.

You can better hide the iframe by default. right? `$("").hide().attr(....)` — Melroy van den Berg, Apr 18 '22 at 00:56

score 1 · Answer 4 · answered Apr 25 '21 at 14:26

I'm using Asp .net core with razor html as view, in this case I have used window.print() to print the page then used window.onafterprint to back to the page where used want to be redirected.

You can use ViewBag to replace the "/NewSales" URL.

NOTE: window.onafterprint will be called whenever user clicks Cancel/Submit/Print button in that pop-up.

$(document).ready(function () {
    window.print();

    window.onafterprint = function () {
        window.location.href = "/NewSales";
    }
});

score -2 · Answer 5 · answered Nov 23 '11 at 10:30

 function CallPrint() {
        var prtContent = document.getElementById('main');
        var WinPrint = window.open('', '', 'width=800,height=650,scrollbars=1,menuBar=1');
        var str =  prtContent.innerHTML;
        WinPrint.document.write(str);
        WinPrint.document.close();
        WinPrint.focus();
    }

Call this javascript function on Print button click."main" is the id of the div which we have to print without opening into new window.I want to notify that this will print the current page div. Try and rever in case of any issue.
Thanks,
Gourav

Printing a web page using just url and without opening new window?

5 Answers5

Linked

Related