Vantagens

• Sua página mantém interatividade após a impressão
• Funciona bem com estruturas
• Não requer duplicação de sua UI para impressão

Passos

1. Ocultar todo o conteúdo da página no modo de impressão
2. Torne seu elemento de destino visível no modo de impressão

Passo 1

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

Etapa 2

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

Depois imprima

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

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

Este método evita a armadilha de perder interatividade, outros métodos substituem todo o conteúdo da página pelo HTML estático, perdendo assim a interatividade.

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

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;