CODEWITHSUNDEEP
javascript
MrDatabase
MrDatabase

Reputation: 44505

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

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?

Upvotes: 198

Views: 158433

Answers (10)

dvicemuse
dvicemuse

Reputation: 586

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

Upvotes: 2

John Nico Novero
John Nico Novero

Reputation: 673

<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

Upvotes: 2

James Heffer
James Heffer

Reputation: 752

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

Upvotes: 2

Dan Sinclair
Dan Sinclair

Reputation: 993

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

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

Upvotes: 16

thestar
thestar

Reputation: 5249

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

window.print();

Upvotes: 6

Daryl H
Daryl H

Reputation: 634

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

Upvotes: 26

Limitless isa
Limitless isa

Reputation: 3802

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

Upvotes: -8

Mark
Mark

Reputation: 14950

window.print();

unless you mean a custom looking popup.

Upvotes: 296

Eli
Eli

Reputation: 99498

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>

Upvotes: 6

mmiika
mmiika

Reputation: 10360

You could do

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

Upvotes: 47

Related Questions