El Atributo ONBEFOREPRINT

Es un evento de JavaScript que se activa cuando el usuario inicia una acción de impresión.

El atributo onbeforeprint es un evento de JavaScript que se activa cuando el usuario inicia una acción de impresión (como abrir el diálogo de impresión o usar Ctrl+P). Se utiliza para preparar el documento antes de la impresión, como modificar estilos u ocultar elementos no relevantes para la versión impresa.

¿Cómo funciona?

  • Disparador: Se ejecuta cuando:

    • El usuario abre el diálogo de impresión (Ctrl+P o menú del navegador).

    • Se llama a window.print() programáticamente.

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

Sintaxis básica

Como atributo HTML:

<body onbeforeprint="miFuncionPreparacion()">
  <!-- Contenido -->
</body>

Con JavaScript (recomendado):

window.onbeforeprint = function() {
  // Acciones previas a la impresión
};

// Alternativa con addEventListener:
window.addEventListener("beforeprint", function() {
  // Preparar el documento
});

Ejemplos prácticos

Ejemplo 1: Cambiar el título antes de imprimir

<script>
  let originalTitle = document.title;
  
  window.onbeforeprint = () => {
    document.title = "Versión para imprimir - " + originalTitle;
  };

  window.onafterprint = () => {
    document.title = originalTitle; // Restaurar título original
  };
</script>

Ejemplo 2: Ocultar elementos no relevantes

<nav class="no-print">...</nav>

<script>
  window.onbeforeprint = () => {
    document.querySelectorAll('.no-print').forEach(el => {
      el.style.display = 'none';
    });
  };

  window.onafterprint = () => {
    document.querySelectorAll('.no-print').forEach(el => {
      el.style.display = 'block';
    });
  };
</script>

Ejemplo 3: Modificar estilos para impresión

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

<script>
  window.onbeforeprint = () => {
    document.body.classList.add('modo-impresion');
  };

  window.onafterprint = () => {
    document.body.classList.remove('modo-impresion');
  };
</script>

Diferencias clave:

onbeforeprint vs onafterprint

Característica onbeforeprint onafterprint
Momento Antes de abrir el diálogo de impresión Después de cerrar el diálogo
Uso típico Preparar contenido/estilos Restaurar cambios, registrar actividad
Disparadores Diálogo de impresión o window.print() Cierre del diálogo (incluso si cancela)

Casos de uso comunes

Optimizar recursos para impresión:

window.onbeforeprint = () => {
  // Cargar imágenes en alta resolución
  document.querySelector('.grafico').src = 'grafico-alta-res.png';
};

Mostrar mensajes temporales:

<div id="preparando-impresion" style="display: none;">
  Preparando documento para imprimir...
</div>

<script>
  window.onbeforeprint = () => {
    document.getElementById('preparando-impresion').style.display = 'block';
  };
</script>

Bloquear interacciones durante la impresión:

window.onbeforeprint = () => {
  document.body.style.pointerEvents = 'none';
};

window.onafterprint = () => {
  document.body.style.pointerEvents = 'auto';
};

Mejores prácticas

Usar con media queries CSS: Combínalo con @media print para estilos específicos:

@media print {
  .botones { display: none; }
}

Limpiar después de imprimir: Siempre restaura los cambios en onafterprint.

Debugear con window.print(): Simula la impresión durante pruebas:

// En la consola del navegador
window.print();

Evitar operaciones lentas: No realices cálculos pesados que retrasen la impresión.

Errores comunes

<!-- MAL: Usar en elementos incorrectos -->
<div onbeforeprint="..."></div> <!-- No funciona -->

<!-- CONFUSIÓN: Asumir que el usuario imprimió -->
<script>
  window.onbeforeprint = () => {
    // ¡Se ejecuta aunque el usuario cancele!
  };
</script>

<!-- OLVIDAR restablecer cambios -->
<script>
  window.onbeforeprint = () => {
    document.body.style.fontSize = '12pt'; // Nunca se restablece
  };
</script>

Compatibilidad

Navegador Soporte Notas
Chrome ✅ Sí (v. 63+)  
Firefox ✅ Sí (v. 6+)  
Safari ✅ Sí (escritorio) Limitado en móviles
Edge ✅ Sí (v. 12+)  
Móviles ⚠️ Limitado No soportado en muchos navegadores

Alternativas avanzadas

Para más control sobre la impresión:

API de window.matchMedia:

const mediaQuery = window.matchMedia('print');
mediaQuery.addListener((mql) => {
  if (mql.matches) {
    console.log('Modo impresión activado');
  }
});

Conclusión

El atributo onbeforeprint es esencial para:

  • Personalizar la experiencia de impresión.
  • Optimizar recursos visuales para papel.
  • Manejar estados temporales durante la impresión.

Recuerda:

  1. Siempre restaura los cambios en onafterprint.
  2. Combínalo con CSS (@media print) para mejores resultados.
  3. No dependas exclusivamente de este evento para funcionalidad crítica.

¡Ahora puedes crear experiencias de impresión profesionales y personalizadas!