How can I pop-up a print dialog box using Javascript?

Question

I have a page with a "Print" link that takes the user to a printer-friendly page. The client wants a print dialog box to appear automatically when the user arrives at the print-friendly page. How can I do this with javascript?

score 288 · Accepted Answer · edited Sep 06 '13 at 06:33

288

window.print();

unless you mean a custom looking popup.

edited Sep 06 '13 at 06:33

ˈvɔlə

9,204
10
63
89

answered Oct 28 '08 at 03:44

Mark

14,820
17
99
159

8

A bit old, but I like to add ... window.print();setTimeout("window.close()", 100); . This waits enough time for the rest of the page to load, but then hangs until the print button on the print dialogue is pressed, or cancelled, and then neatly shuts the tab down again. – Stephen Oct 13 '16 at 12:03

score 45 · Answer 2 · answered Oct 28 '08 at 03:45

45

You could do

<body onload="window.print()">
...
</body>

answered Oct 28 '08 at 03:45

mmiika

9,970
5
28
34

score 25 · Answer 3 · edited Jul 30 '16 at 16:07

25

I like this, so that you can add whatever fields you want and print it that way.

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

edited Jul 30 '16 at 16:07

aknuds1

65,625
67
195
317

answered Jun 27 '13 at 20:26

Daryl H

624
8
8

2

This worked like a charm for me. Needed to allow popups in browser. I'm not sure the "close" ever gets executed, since the tab never goes away. – rich Jul 15 '14 at 16:40
It works, but open a new tab. Is there a way to prevent this? – Bellu Aug 26 '22 at 07:53

score 12 · Answer 4 · edited Jun 14 '19 at 14:50

12

If you just have a link without a click event handler:

<a href="javascript:window.print();">Print Page</a>

edited Jun 14 '19 at 14:50

Community

1
1

answered May 24 '19 at 16:43

Dan Sinclair

907
1
9
27

score 5 · Answer 5 · answered Oct 28 '08 at 03:50

I do this to make sure they remember to print landscape, which is necessary for a lot of pages on a lot of printers.

<a href="javascript:alert('Please be sure to set your printer to Landscape.');window.print();">Print Me...</a>

or

<body onload="alert('Please be sure to set your printer to Landscape.');window.print();">
etc.
</body>

score 5 · Answer 6 · answered Nov 05 '17 at 01:30

5

You can tie it to button or on load of the page.

window.print();

answered Nov 05 '17 at 01:30

thestar

4,959
2
28
22

score 2 · Answer 7 · answered Nov 14 '19 at 07:56

I know the answer has already been provided. But I just wanted to elaborate with regards to doing this in a Blazor app (razor)...

You will need to inject IJSRuntime, in order to perform JSInterop (running javascript functions from C#)

IN YOUR RAZOR PAGE:

@inject IJSRuntime JSRuntime

Once you have that injected, create a button with a click event that calls a C# method:

<MatFAB Icon="@MatIconNames.Print" OnClick="@(async () => await print())"></MatFAB>

(or something more simple if you don't use MatBlazor)

<button @onclick="@(async () => await print())">PRINT</button>

For the C# method:

public async Task print()
{
    await JSRuntime.InvokeVoidAsync("printDocument");
}

NOW IN YOUR index.html:

<script>
    function printDocument() {
        window.print();
    }
</script>

Something to note, the reason the onclick events are asynchronous is because IJSRuntime awaits it's calls such as InvokeVoidAsync

PS: If you wanted to message box in asp net core for instance:

await JSRuntime.InvokeAsync<string>("alert", "Hello user, this is the message box");

To have a confirm message box:

bool question = await JSRuntime.InvokeAsync<bool>("confirm", "Are you sure you want to do this?");
    if(question == true)
    {
        //user clicked yes
    }
    else
    {
        //user clicked no
    }

Hope this helps :)

This is helpful @James-Heffer, but you can even simplify it further (if only for the Print portion) buy NOT creating your own JavaScript method of `printDocument` and just call `await JSRuntime.InvokeVoidAsync("print");` and just call the given method directly. — Grandizer, Sep 12 '22 at 17:06
Could this in any way be applied to an ASP.NET MVC 5 scenario ? I'm running on .NET 4.5 — Axel Samyn, Jan 27 '23 at 13:01

score 1 · Answer 8 · edited Sep 16 '22 at 03:08

I know this is an old question, but after fighting with this similar issue, I figured out a way to open a print screen and NOT have to open a new tab, and not have to enable popups.

Hopefully, this helps someone else.

/*
    Example:
    <a href="//example.com" class="print-url">Print</a>
*/

//LISTEN FOR PRINT URL ITEMS TO BE CLICKED
$(document).off('click.PrintUrl').on('click.PrintUrl', '.print-url', function(e){

    //PREVENT OTHER CLICK EVENTS FROM PROPAGATING
    e.preventDefault();

    //TRY TO ASK THE URL TO TRIGGER A PRINT DIALOGUE BOX
    printUrl($(this).attr('href'));
});

//TRIGGER A PRINT DIALOGE BOX FROM A URL
function printUrl(url) {    

    //CREATE A HIDDEN IFRAME AND APPEND IT TO THE BODY THEN WAIT FOR IT TO LOAD
    $('<iframe src="'+url+'"></iframe>').hide().appendTo('body').on('load', function(){
        
        var oldTitle    = $(document).attr('title');                //GET THE ORIGINAL DOCUMENT TITLE
        var that        = $(this);                                  //STORE THIS IFRAME AS A VARIABLE           
        var title       = $(that).contents().find('title').text();  //GET THE IFRAME TITLE
        $(that).focus();                                            //CALL THE IFRAME INTO FOCUS (FOR OLDER BROWSERS)   

        //SET THE DOCUMENT TITLE FROM THE IFRAME (THIS NAMES THE DOWNLOADED FILE)
        if(title && title.length) $(document).attr('title', title);
        
        //TRIGGER THE IFRAME TO CALL THE PRINT
        $(that)[0].contentWindow.print();

        //LISTEN FOR THE PRINT DIALOGUE BOX TO CLOSE
        $(window).off('focus.PrintUrl').on('focus.PrintUrl', function(e){
            e.stopPropagation();                                            //PREVENT OTHER WINDOW FOCUS EVENTS FROM RUNNING            
            $(that).remove();                                               //GET RID OF THE IFRAME
            if(title && title.length) $(document).attr('title', oldTitle);  //RESET THE PAGE TITLE
            $(window).off('focus.PrintUrl');                                //STOP LISTENING FOR WINDOW FOCUS
        });
    });    
};

Great documentation! A+ – Paul - Soura Tech LLC Mar 09 '23 at 05:17 — Paul - Soura Tech LLC, Mar 09 '23 at 05:17

score 0 · Answer 9 · answered Dec 10 '21 at 01:35

0

<script>
    const _print = () => {
        window.print();
    }
</script>

or

<body onload="window.print();"></body>

see the documentation here : https://developer.mozilla.org/en-US/docs/Web/API/Window/print

answered Dec 10 '21 at 01:35

John Nico Novero

539
5
10

score -7 · Answer 10 · answered Jul 28 '16 at 11:40

if problem:

 mywindow.print();

altenative using:

'<scr'+'ipt>print()</scr'+'ipt>'

Full:

 $('.print-ticket').click(function(){

        var body = $('body').html();
        var ticket_area = '<aside class="widget tickets">' + $('.widget.tickets').html() + '</aside>';

        $('body').html(ticket_area);
        var print_html = '<html lang="tr">' + $('html').html() + '<scr'+'ipt>print()</scr'+'ipt>' + '</html>'; 
        $('body').html(body);

        var mywindow = window.open('', 'my div', 'height=600,width=800');
        mywindow.document.write(print_html);
        mywindow.document.close(); // necessary for IE >= 10'</html>'
        mywindow.focus(); // necessary for IE >= 10
        //mywindow.print();
        mywindow.close();

        return true;
    });

why are you concatenating this together anyway? 'print()' – CRice Nov 02 '18 at 04:43 — CRice, Nov 02 '18 at 04:43

How can I pop-up a print dialog box using Javascript?

10 Answers10

Linked

Related