En este artículo vamos a ver cómo podemos controlar el fin de impresión en HTML5 para poder interactuar con nuestros usuarios y avisarlos que la impresión del documento ha terminado de forma correcta o no. Y es que el usuario, bien sea mediante el menú del navegador para imprimir o bien porque le hayamos incluido en la página web la capacidad de imprimir, podrá lanzar una impresión del documento actual.
Es en ese momento en el que entran en juego una serie de eventos que nos van a permitir asistir al usuario en el flujo de impresión. Estos eventos son onbeforeprint para poder interactuar antes de lanzar la impresión y onafterprint el cual nos permite interactuar con el usuario una vez que ha acabado el proceso de impresión.
Para el caso que nos atañe ahora, para poder controlar el fin de impresión en HTML5 nos vamos a centrar en el evento onafterprint.
La idea del ejemplo va a ser el avisar al usuario en un mensaje dentro de la web en el cual le indicaremos que ha terminado su proceso de impresión. Es por ello que lo primero que haremos será crear en la página un espacio en el que vamos a mostrar el mensaje. Esto lo haremos mediante un elemento div al cual daremos un identificador «mensaje».
div id="mensaje"></div>
Lo siguiente será crear una función, la cual nos permita incluir un contenido en este elemento div una vez que se haya realizado la impresión. Es importante entender que hay que utilizar el método .getElementById() para poder acceder a este elemento y volcar sobre él el mensaje.
function mensaje(texto){
contenido = document.getElementById("mensaje");
contenido.innerHTML = texto;
}
function postimpresion(){
mensaje("Has realizado una impresión");
}
Vemos que cuando hemos obtenido la referencia al elemento div lo siguiente que se ha realizado es utilizar la propiedad .innerHTML para modificar el texto.
Ahora podremos utilizar la función postimpresion() cuando se produzca el final de la impresión, es decir, cuando se produzca el evento onafterprint. Hay varias formas de poder capturar este evento onafterprint, en nuestro caso vamos a utilizar un atributo del elemento body que nos permite en HTML5 capturar dicho evento.
<body onafterprint="postimpresion();">
Ya solo te quedará el cargar la página web y enviarla a imprimir. Podrás comprobar cómo sale el mensaje cuando termines o canceles la impresión. Así habremos controlado el fin de Impresión en HTML5.
