18.03.2025

Imprimindo Conteúdo Específico em HTML com um Botão: Uma Solução

Resposta Rápida

Para imprimir rapidamente uma parte específica de uma página da web, coloque o conteúdo em uma tag div com um id exclusivo, como id="areaImprimivel". Em seguida, aplique uma função simples em JavaScript para invocar a caixa de diálogo de impressão limitada a essa seção:

<button onclick="imprimirConteudo('areaImprimivel')">Imprimir Seção</button>
<div id="areaImprimivel">Texto para imprimir</div>

<script>
function imprimirConteudo(el){
  var zonaImpressao = document.getElementById(el).innerHTML;
  var janelaImpressao = window.open('', '', 'left=0,top=0,width=800,height=900,status=0');
  janelaImpressao.document.write('<title>Imprimir Conteúdo</title>');
  janelaImpressao.document.write('<style>@media print { .nao-imprimir { display: none; } }</style>'); // Oculta elementos que não devem ser impressos
  janelaImpressao.document.write(zonaImpressao);
  janelaImpressao.document.close();
  janelaImpressao.focus();
  janelaImpressao.print();
  janelaImpressao.close();
}
</script>

Dica Profissional: Usando Controles de Impressão

O atalho Ctrl+P pode trazer resultados imprevisíveis. Na maioria das vezes, estamos interessados em imprimir uma seção específica da página. Veja como implementá-lo:

Controlando a Visibilidade Através de Consultas de Mídia CSS

As consultas de mídia CSS são excelentes para ajustar a visibilidade dos elementos durante a impressão. Você pode designar conteúdo específico para imprimir utilizando-as:

@media print {
  body * {
    display: none; 
  }
  #areaImprimivel, #areaImprimivel * {
    display: block;
  }
}

Imprimindo Conteúdo de Forma Dinâmica

Se você precisa imprimir um div que muda dinamicamente, não se preocupe. O JavaScript é flexível o suficiente. Podemos adaptar a função imprimirConteudo para lidar com múltiplos elementos.

function imprimirConteudo(...ids) {
  const conteudo = ids.map(id => document.getElementById(id).innerHTML).join('');
  // Implementação do processo de impressão segue...
}

Agora, a função imprimirConteudo pode ser chamada com múltiplos identificadores para imprimir diferentes seções.

Nível Profissional de Impressão!

Criando Estilos CSS Específicos para Impressão

Uma abordagem sensata é criar uma folha de estilos separada para personalizar os estilos de impressão. Isso simplifica a manutenção e melhora a clareza do seu código de estilos:

<link rel="stylesheet" href="print.css" media="print">

Mudando a Visibilidade Dinamicamente com JavaScript

O JavaScript permite que você altere dinamicamente a visibilidade dos elementos:

document.body.classList.add('modo-impressao'); // Ativar modo de impressão
window.print();
document.body.classList.remove('modo-impressao'); // Resetar para o estado original.

É crucial que a classe CSS .modo-impressao ajuste corretamente a visibilidade dos elementos.

Visualização

Sua tarefa é selecionar apenas as partes da "galeria" em sua aplicação web que você precisa imprimir, ocultando todo o resto:

🖨️ Botão de impressão pressionado 🖨️

Antes: [🖼️ Galeria Completa]
Depois: [🖼️ Obra Selecionada]

<button onclick="imprimirConteudo('obra')">Imprimir Obra</button>

function imprimirConteudo(elementId) {
  let conteudoImprimir = document.getElementById(elementId).innerHTML;
  let conteudoOriginal = document.body.innerHTML;

  document.body.innerHTML = conteudoImprimir;
  window.print();
  document.body.innerHTML = conteudoOriginal;
}

Você tem controle total sobre o que permanece na página e o que aparece na versão impressa.

Conclusão

Maximizar a Simplicidade da Interação do Usuário

Busque o mínimo número de ações do usuário para atingir o objetivo. Isso pode parecer óbvio, mas muitas vezes essa abordagem é negligenciada.

Navegando com Cuidado pelas Diferenças nos Navegadores

Lidar com caixas de diálogo de impressão em diferentes navegadores pode variar significativamente. Portanto, é essencial organizar uma degradação graciosa da funcionalidade entre os navegadores.

Evitar Tremores e Movimentos na Página

Ganhe pontos adicionais ao evitar deslocamentos e tremores na página durante a impressão. O usuário deve sentir a estabilidade da página, apesar do resultado da impressão.

Manter a Página Estável

Após a impressão, a página da web deve retornar ao seu estado original sem perder dados inseridos e estado atual.

Recursos Úteis

1. Método Window: print() - Web API | MDN
2. Método Window print() - W3Schools
3. Imprimir na Web | CSS-Tricks
4. CSS para Formatação de Impressão – A List Apart
5. Como Configurar uma Folha de Estilo de Impressão — Smashing Magazine
6. Como Desativar Configurações de Impressão no Navegador (Cabeçalhos, Rodapés, Margens) da Página? - Stack Overflow
7. @media - CSS: Folhas de Estilo em Cascata | MDN

Video

Navigation