Ventajas

• Su página conserva la interactividad después de imprimirse
• Funciona bien con frameworks
• No requiere duplicar su interfaz de usuario para imprimir

Pasos

1. Ocultar todo el contenido de la página cuando esté en modo de impresión
2. Haz que tu elemento objetivo sea visible en el modo de impresión

Paso 1

@media print {
  body {
    visibility: hidden;
  }
}

Paso 2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}

Luego imprima

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());

Este método evita el peligro de perder interactividad; otros métodos reemplazan todo el contenido de la página con HTML estático, perdiendo así interactividad.

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;