Fin de Impresión en HTML5
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:
onbeforeprintpara poder interactuar antes de lanzar la impresiónonafterprintel 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.
Crear el espacio para el mensaje
Sección titulada «Crear el espacio para el mensaje»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>Función para mostrar el mensaje
Sección titulada «Función para mostrar el mensaje»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 postimpresion() { document.getElementById('mensaje').innerHTML = 'Proceso de impresión finalizado';}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.
Capturar el evento onafterprint
Sección titulada «Capturar el evento onafterprint»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.
Descarga el código de Fin de Impresión en HTML5
Ejemplo que nos explica cómo utilizar el evento onafterprint para poder controlar el fin de impresión en HTML5 y mostrar un mensaje al usuario