Como imprimir o conteúdo de uma div? HTML

Neste artigo você vai aprender como imprimir o conteúdo de uma div em seu projeto HTML, ignorando o resto da página e imprimindo só o selecionado.

Fala programador(a), beleza? Bora aprender só o conteúdo selecionado no HTML!

Primeiramente é bom deixar claro que só com HTML isso não será possível, você vai precisar de uma regra CSS da instrução @media

Isso mesmo! A mesma instrução que você consegue ajustar a responsividade de uma página web

Então veja o código necessário:

@media print {
  /* esconder tudo */
  body * {
    visibility: hidden;
  }
  /* exibir somente o que tem na div para imprimir */
  #imprimir, #imprimir * {
    visibility: visible;
  }
  #imprimir {
    position: fixed;
    left: 0;
    top: 0;
  }
  
}

Basicamente estamos escondendo tudo na visão de impressão (@media print) com a regra de body *

E depois estamos exibindo tudo que está no id imprimir, alterando a sua propriedade visibility

Deste modo você vai conseguir imprimir só a área desejada, enquanto esconde o resto

É interessante ressaltar que você vai precisar inserir todo o conteúdo que será impresso na div com o id imprimir, e não em todas as divs

Conclusão

Neste artigo vimos como imprimir o conteúdo de uma div dos projetos de HTML

Primeiramente adicionamos uma regra de @media print, que vai alterar o estilo só para impressões

E escondemos todo o conteúdo, menos o que vai ser impresso pelo atributo visibility

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube