Configurando impressão no seu documento html
Recentemente tive reclamações de usuários em um sistema que entregamos em produção relacionado a impressão de documentos a partir do browser. O problema era que uma página em branco ou com pouco texto estava apresentando duas página para impressão o que estava gerando desperdício de folhas porque no rodapé da página vem informações como a url impressa.
Eu não conhecia nada relacionado que pudesse ajudar a configurar a página, então, partir para o mais óbivio que era ocultar / exibir elementos ao clicar em imprimir. Além de ser uma solução ruim não funcionou 100% e foi aí que batendo cabeça aqui e ali encontrei a media query @print.
Tá mas o que esse cara faz? Com essa media query você pode configurar o que quer ocultar / exibir no momento da impressão. No meu caso a página possuia uma barra com algumas opções que não deveria sair na impressão e o body da página estava com height: 100%.
Para usar esse cara é bem fácil basta você adicionar a media query @print e adicionar ou remover os elementos da tela de acordo com a sua necessidade, então, para resolver meu problema bastou adicionar um height: 95% e setar um display none na barra que não deveria aparecer na impressão. Simples assim!
Veja um exemplo abaixo:
<html>
<head>
<style>
@media print {
#menu {
display: none !important;
}
body {
height: 95%;
}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</div>
<div class="content">
Aqui é o conteúdo que queremos imprimir
</div>
</body>
</html>
Como podem ver no momento da impressão a div id “menu” será oculta e o body da página será ajustado para 95%. Essa é uma forma simples e prática de você configurar o conteúdo de impressão da sua página.