Eventos de impressão JavaScript

As consultas de mídia são uma ótima maneira de alterar o comportamento de forma programática, dependendo do estado de exibição. Podemos direcionar estilos para dispositivos, proporção de pixels, tamanho da tela e até mesmo para impressão. Dito isso, também é bom ter eventos JavaScript que também nos permitem alterar o comportamento. O senhor sabia que tem à sua disposição eventos antes e depois da impressão?

Eu sempre usei @media print em folhas de estilo para controlar a exibição de impressão, mas o JavaScript oferece beforeprint e afterprint eventos:

function toggleImages(hide = false) {
  document.querySelectorAll('img').forEach(img => {
    img.style.display = hide ? 'none' : '';
  });
}

// Hide images to save toner/ink during printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());

Pode parecer estranho, mas considerar a impressão é muito importante, especialmente quando seu site é centrado em documentação. Em meus primeiros dias na Web, tive um cliente que só “visualizava” seu site a partir de impressões. Estilizar com @media print geralmente é a melhor opção, mas esses eventos JavaScript podem ajudar!