Como imprimir conteúdo HTML específico com clique de botão

Ao tentar imprimir conteúdo HTML específico ao clicar em um botão, é crucial evitar imprimir o página inteira. Aqui está uma abordagem abrangente:

Aproveitar consultas de mídia

Enfatizar a consulta de mídia para impressão em CSS é uma solução limpa:

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

Isso oculta elementos com a classe "noPrint" durante a impressão.

Aplicando seletores CSS

Designe os elementos que deseja imprimir com CSS específico seletores, como:

  print me


  no print

Implementando evento de clique de botão

Anexe um evento de clique ao seu botão para iniciar a impressão:

  Print Me

Benefícios

Esse método oculta efetivamente elementos irrelevantes durante a impressão, preservando a clareza e evitando confusão. Ele também mantém a aparência do site para visualização na tela, melhorando a experiência do usuário.