¿Cómo puedo ocultar el botón antes de imprimir y mostrarlo cuando se ha completado el proceso de impresión?

Question

Tengo un botón de impresión con id="print_req". Escribí un código JavaScript para imprimir una página, que se activa al hacer clic en este botón, y también quiero ocultar este botón antes de imprimir y mostrarlo después de todo el proceso de impresión. Me refiero a no imprimir el botón en mi documento impreso. Aquí está mi código:

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

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

Este correctamente ocultar ese botón, pero cuando el proceso de impresión conseguir hecho, el botón no se mostrará de nuevo! ¿Cuál es el problema?

Answer 1

Usted va en este error. No deberías mostrar y ocultar el botón con JavaScript o usar una imagen de fondo para hacerlo. Debería utilizar una hoja de estilo de impresión que le permitirá aplicar diferentes estilos a la página cuando se imprima. En su caso, configuraría la pantalla como ninguna [o la visibilidad como oculta] en esta hoja de estilo.

Así que añadir una hoja de estilo con el tipo de papel para la impresión

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

En ese print.css, se oculta el botón

.printButtonClass{ display : none } 

Y listo, el botón se esconde cuando se imprime sin JavaScript.

Answer 2

El problema es que no puede saber cuándo la impresión ha finalizado usando javascript. No hay evento que se active para notificar esto.

Por razones de seguridad, javascript se ejecuta en un entorno de espacio aislado dentro del navegador que limita su acceso a los recursos del sistema.

Answer 3

El cuadro de diálogo de impresión es parte del sistema operativo. Javascript solo puede acceder a los elementos que forman parte de la página web, cualquier otra cosa sería una violación de seguridad importante.

Answer 4

Es fácil, solo use esto, aplique la clase noprint a su botón.

@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

Basta con hacer esto ...

$ (document) ready (function() {

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

    }); 
});