Wie kann ich die Schaltfläche vor dem Drucken ausblenden und anzeigen, wenn der Druckvorgang abgeschlossen ist?

Question

Ich habe eine Drucktaste mit id="print_req". Ich habe etwas Javascript-Code geschrieben, um eine Seite zu drucken, die durch Klicken auf diese Schaltfläche ausgelöst wird, und ich möchte diese Schaltfläche auch vor dem Drucken ausblenden und nach dem ganzen Druckvorgang anzeigen.Ich meine Schaltfläche nicht in meinem gedruckten Dokument zu drucken. Hier ist mein Code:

$(document).ready(function(){ 
    $("#print_req").click(function(){ 
     $("#print_req").css("display","none"); 
     window.print(); 
    }); 

    $("#print_req").css("display","block"); 
    return false; 
}); 

Dies richtig, dass die Taste verbergen, aber wenn der Druckprozess erledigen, die Taste nicht mehr anzeigen! Was ist das Problem?

Answer 1

Sie an dieser falsch gehen. Sie sollten die Schaltfläche nicht mit JavaScript anzeigen oder ausblenden oder dafür ein Hintergrundbild verwenden. Sie sollten ein Druck-Stylesheet verwenden, mit dem Sie verschiedene Stile auf die Seite anwenden können, wenn sie gedruckt wird. In Ihrem Fall würden Sie die Anzeige in diesem Stylesheet auf keine Sichtbarkeit setzen.

So fügen Sie ein Stylesheet mit den Medientyp für den Druck

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

In diesem print.css Sie die Taste

.printButtonClass{ display : none } 

Und presto verstecken, versteckt sich die Taste, wenn Sie mit nicht drucken JavaScript.

Answer 2

Das Problem ist, dass Sie nicht wissen können, wenn der Druckvorgang abgeschlossen ist Javascript. Es gibt kein Ereignis, das ausgelöst wird, um dies zu melden.

Aus Sicherheitsgründen Javascript in einer Sandbox-Umgebung im Browser ausgeführt wird, seinen Zugriff auf alle Systemressourcen zu begrenzen.

Answer 3

Druckdialogfeld ist ein Teil des Betriebssystems. Javascript kann nur auf Elemente zugreifen, die Teil der Webseite sind - alles andere wäre eine große Sicherheitsverletzung.

Answer 4

Es ist einfach, benutzen Sie bitte diese nur verwenden, gelten die Klasse noprint auf den Button aus.

@media print { 
    .noprint{ 
     display: none !important; 
    } 
} 

Answer 5

function printFunction() { 

var restoreoriginalpage = document.body.innerHTML; 
$('#print-button').css('visibility', 'hidden'); //hiding print button before it prints 
var printcontent = document.getElementById("content").innerHTML; 
document.body.innerHTML = printcontent; 
window.print();      
document.body.innerHTML = restoreoriginalpage; //restore original page   
} 

Answer 6

Ganz einfach tun ...

$ (document) .ready (function() {

$('#print').on('click',function(){ 
    $('#print').hide(); 
    window.print(); 
    $('#print').show(); 

    }); 
});