JavaScript print Occasions

Media queries present an effective way to programmatically change habits relying on viewing state. We are able to goal types to gadget, pixel ratio, display screen measurement, and even print. That stated, it is also good to have JavaScript occasions that additionally permit us to vary habits. Do you know you are offered occasions each earlier than and after printing?

I’ve at all times used @media print in stylesheets to regulate print show, however JavaScript offers beforeprint and afterprint occasions:

perform toggleImages(cover = false) {
  doc.querySelectorAll('img').forEach(img => {
    img.type.show = cover ? 'none' : '';
  });
}

// Disguise photographs to avoid wasting toner/ink throughout printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());

It might sound bizarre however contemplating print is essential, particularly when your web site is documentation-centric. In my early days of net, I had a shopper who solely “seen” their web site from print-offs. Styling with @media print is often the very best choices however these JavaScript occasions might assist!