Wie kann ich ein Druckdialogfeld mit Javascript öffnen?

159

Ich habe eine Seite mit einem "Drucken" -Link, der den Benutzer zu einer druckerfreundlichen Seite führt. Der Client möchte, dass ein Druckdialogfeld automatisch angezeigt wird, wenn der Benutzer die druckfreundliche Seite erreicht. Wie kann ich das mit Javascript machen?

javascript MrDatabase
quelle

Antworten:

235 
window.print();

es sei denn, Sie meinen ein benutzerdefiniertes Popup.

Kennzeichen
quelle
5
Ein bisschen alt, aber ich möchte hinzufügen ... window.print (); setTimeout ("window.close ()", 100); . Dies wartet genug Zeit, bis der Rest der Seite geladen ist, bleibt dann jedoch hängen, bis die Drucktaste im Druckdialog gedrückt oder abgebrochen wird, und schließt die Registerkarte dann wieder ordentlich.
Stephen
37

Du könntest es tun

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

Ich mag das, damit Sie beliebige Felder hinzufügen und auf diese Weise drucken können.

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.
quelle
2
Das hat für mich wie ein Zauber gewirkt. Wird benötigt, um Popups im Browser zuzulassen. Ich bin nicht sicher, ob das "Schließen" jemals ausgeführt wird, da der Tab nie verschwindet.
reich
5

Ich mache das, um sicherzustellen, dass sie daran denken, Querformat zu drucken, was für viele Seiten auf vielen Druckern erforderlich ist.

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

oder 

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

Wenn Sie nur einen Link ohne Klickereignishandler haben:

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

Sie können es an die Schaltfläche oder beim Laden der Seite binden.

window.print();
der Stern
quelle
0

Ich weiß, dass die Antwort bereits gegeben wurde. Aber ich wollte dies nur in einer Blazor-App (Rasiermesser) erläutern ...

Sie müssen IJSRuntime injizieren, um JSInterop auszuführen (Ausführen von Javascript-Funktionen von C # aus).

IN IHRER RAZOR SEITE: 

@inject IJSRuntime JSRuntime

Sobald Sie dies injiziert haben, erstellen Sie eine Schaltfläche mit einem Klickereignis, das eine C # -Methode aufruft: 

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

(oder etwas einfacheres, wenn Sie MatBlazor nicht verwenden)

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

Für die C # -Methode: 

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

JETZT IN IHRER index.html: 

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

Zu beachten ist, dass die Onclick-Ereignisse asynchron sind, weil IJSRuntime auf Aufrufe wie InvokeVoidAsync wartet

PS: Wenn Sie zum Beispiel eine Meldungsbox in asp net core haben möchten: 

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

So erhalten Sie eine Bestätigungsmeldung: 

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
    }

Hoffe das hilft :)

James Heffer
quelle
-6

wenn Problem:

 mywindow.print();

alternativ mit: 

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

Voll:

 $('.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;
    });
Grenzenlose isa
quelle
3
warum verkettest du das überhaupt zusammen? '<scr' + 'ipt> print () </ scr' + 'ipt>'
CRice