Comment afficher une boîte de dialogue d'impression avec Javascript?

159

J'ai une page avec un lien "Imprimer" qui redirige l'utilisateur vers une page imprimable. Le client souhaite qu'une boîte de dialogue d'impression apparaisse automatiquement lorsque l'utilisateur arrive sur la page imprimable. Comment puis-je faire cela avec javascript?

javascript

— MrDatabase
source

235

window.print();

sauf si vous voulez dire une fenêtre contextuelle personnalisée.

— marque
source

5

Un peu vieux, mais j'aime ajouter ... window.print (); setTimeout ("window.close ()", 100); . Cela attend suffisamment de temps pour que le reste de la page se charge, puis se bloque jusqu'à ce que le bouton d'impression de la boîte de dialogue d'impression soit enfoncé ou annulé, puis ferme à nouveau l'onglet proprement.

— Stephen

37

Vous pourriez faire

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

— mmiika
source

21

J'aime ça, pour que vous puissiez ajouter les champs que vous voulez et l'imprimer de cette façon.

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

— Daryl H
source

2

Cela a fonctionné comme un charme pour moi. Nécessaire pour autoriser les fenêtres contextuelles dans le navigateur. Je ne suis pas sûr que le "close" soit jamais exécuté, puisque l'onglet ne disparaît jamais.

— riche

5

Je fais cela pour m'assurer qu'ils se souviennent d'imprimer le paysage, ce qui est nécessaire pour beaucoup de pages sur de nombreuses imprimantes.

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

ou

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

— Eli
source

3

Si vous avez juste un lien sans gestionnaire d'événements de clic:

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

— Dan Sinclair
source

0

Vous pouvez l'attacher au bouton ou au chargement de la page.

window.print();

— l'étoile
source

0

Je sais que la réponse a déjà été fournie. Mais je voulais juste préciser comment faire cela dans une application Blazor (rasoir) ...

Vous devrez injecter IJSRuntime, afin d'exécuter JSInterop (exécuter des fonctions javascript à partir de C #)

DANS VOTRE PAGE RAZOR:

@inject IJSRuntime JSRuntime

Une fois que vous avez injecté cela, créez un bouton avec un événement de clic qui appelle une méthode C #:

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

(ou quelque chose de plus simple si vous n'utilisez pas MatBlazor)

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

Pour la méthode C #:

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

MAINTENANT DANS VOTRE index.html:

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

Quelque chose à noter, la raison pour laquelle les événements onclick sont asynchrones est parce que IJSRuntime attend ses appels tels que InvokeVoidAsync

PS: si vous vouliez envoyer un message dans asp net core par exemple:

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

Pour avoir une boîte de message de confirmation:

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
    }

J'espère que cela t'aides :)

— James Heffer
source

-6

si problème:

 mywindow.print();

alternative utilisant:

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

Plein:

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

— Isa illimité
source

3

pourquoi concaténez-vous cela ensemble de toute façon? '<scr' + 'ipt> print () </ scr' + 'ipt>'

— CRice