El Atributo ONAFTERPRINT

Se activa después de que un usuario imprime un documento o cierra la vista previa de impresión.

El atributo onafterprint es un evento de JavaScript que se activa después de que un usuario imprime un documento o cierra la vista previa de impresión. Es útil para ejecutar acciones tras completar una operación de impresión, como restaurar elementos de la interfaz, registrar actividad o mostrar mensajes al usuario.

¿Cómo funciona?

  • Disparador: Se ejecuta cuando:

    • El usuario imprime el documento (acepta la impresión).

    • El usuario cierra el cuadro de diálogo de impresión o la vista previa (incluso si cancela).

  • Contexto: Funciona principalmente en el objeto window, pero puede usarse como atributo HTML en <body> o <iframe>.

Sintaxis básica

Como atributo HTML:

<body onafterprint="miFuncion()">
  <!-- Contenido -->
</body>

Con JavaScript (recomendado):

window.onafterprint = function() {
  console.log("La impresión ha finalizado");
};

// O usando addEventListener:
window.addEventListener("afterprint", function() {
  // Acciones...
});

Ejemplos prácticos

Ejemplo 1: Mostrar un mensaje al usuario

<script>
  window.onafterprint = () => {
    alert("¡Documento impreso con éxito!");
  };
</script>

Ejemplo 2: Restaurar estilos después de imprimir

<style>
  .no-print { display: block; }
  @media print {
    .no-print { display: none; }
  }
</style>

<script>
  window.onbeforeprint = () => {
    document.title = "Documento para imprimir";
  };

  window.onafterprint = () => {
    document.title = "Documento normal";
    document.querySelector(".no-print").style.color = "green";
  };
</script>

Diferencias clave: onafterprint vs onbeforeprint

Evento Momento de activación Casos de uso típicos
onbeforeprint Al abrirse el cuadro de impresión Preparar el documento para imprimir
onafterprint Al cerrarse el cuadro de impresión Restaurar cambios, registrar logs

Casos de uso comunes

Registro de actividad:

window.onafterprint = () => {
  console.log("Impresión solicitada a las:", new Date().toLocaleTimeString());
};

Revertir cambios visuales:

let originalBackground;
window.onbeforeprint = () => {
  originalBackground = document.body.style.background;
  document.body.style.background = "white";
};

window.onafterprint = () => {
  document.body.style.background = originalBackground;
};

Mostrar/ocultar elementos:

<div id="mensaje-postimpresion" style="display: none;">
  ¿Necesitas otra copia? <button onclick="window.print()">Reimprimir</button>
</div>

<script>
  window.onafterprint = () => {
    document.getElementById("mensaje-postimpresion").style.display = "block";
  };
</script>

Mejores prácticas

Usar addEventListener:

Para separar el HTML del JavaScript y manejar múltiples listeners:

window.addEventListener("afterprint", manejarPostImpresion);

Combinar con onbeforeprint:

Para un flujo completo:

window.onbeforeprint = () => { /* Pre-impresión */ };
window.onafterprint = () => { /* Post-impresión */ };

No asumir que el usuario imprimió:

El evento se activa incluso si cancela.

Evitar operaciones bloqueantes:

No uses alert() o confirm() directamente, ya que pueden resultar molestos.

Errores comunes

<!-- MAL: Usarlo en elementos no soportados -->
<div onafterprint="..."></div> <!-- No funciona -->

<!-- CONFUSIÓN: Esperar que distinga entre impresión y cancelación -->
<script>
  window.onafterprint = () => {
    // ¡Se ejecutará tanto si imprime como si cancela!
  };
</script>

<!-- OLVIDAR compatibilidad -->
<!-- Algunos navegadores no lo soportan en móviles -->

Compatibilidad

Navegador Soporte Notas
Chrome ✅ Sí Versión 63+
Firefox ✅ Sí Versión 6+
Safari ⚠️ Parcial Solo en escritorio
Edge ✅ Sí Versión 12+
Móviles ⚠️ Limitado No soportado en muchos navegadores

Alternativas para mayor control

Si necesitas detectar si realmente se realizó la impresión, considera:

API de Impresión nativa:

const mediaQuery = window.matchMedia('print');
mediaQuery.addListener((mql) => {
  if (!mql.matches) {
    console.log("Impresión completada");
  }
});

Conclusión

El atributo onafterprint es útil para:

  • Restaurar cambios visuales después de imprimir.
  • Realizar seguimiento de actividades de impresión.
  • Mejorar la experiencia del usuario con feedback.

Recuerda:

  • No es 100% confiable: Algunos navegadores no lo implementan consistentemente.
  • Siempre prueba: Verifica el comportamiento en tus navegadores objetivo.
  • Combínalo con onbeforeprint: Para un manejo completo del ciclo de impresión.

¡Ahora puedes controlar las acciones post-impresión como un profesional!