Do HTML para impressora - Parte 1

Certas vezes, nós nos deparamos como a necessidade de fazer um objeto de apresentação para situações bem diferentes como o Browser e a impressora. A briga é boa: podemos criar objetos especializados para cada meio ou criar um objeto versátil o suficiente para atender os meios alvos. A seguinte proposta se guia pelo segundo caso objetivando a codificação de um único código para realizar uma tarefa específica.

Imagine uma aplicação com a seguinte funcionalidade: A aplicação tem basicamente a função de buscar notas por um certo critério, exibir e imprimir a nota procurada. Um operador informa os campos chaves da nota. No passo seguinte, a aplicação devolve uma página com os dados da nota e uma formatação que mimetize ao máximo o layout originial da nota. Eventualmente, como essa nota está integrada a uma aplicação web, a página conterá outras “informações” como logo, links de navegação etc que não tem nada a ver com a nota mas apenas com a aplicação que a contém.
Sem um tratamento adequado, o conteúdo da página não pode ser utilizado na impressão da nota dentro nos específicos formulários. Felizmente para isso, o HTML e CSS fornecem um ferramental que permite escolher informações que cabem a renderização em um contexto e não em outros. O atributo media da tag “link” do HTML permite que um determinado estilo seja aplicado para uma mídia específica como tela ou impressora. Além disso, atributos CSS 2 permitem excluir itens da renderização. Com esses dois conceitos, é possível escolher os elementos que serão apresentados em uma mídia e em outra não, e como serão apresentados. Finalmente o CSS 3 traz atributos específicos a impressão como tamanho da página, margens, etc que ajudam a definir com precisão o layout da impressão.
Nessa implementação, será criado um arquivo de estilo destinado a impressão (printer.css) que é ligado ao HTML pelo comando abaixo.

link rel="stylesheet" type="text/css" href="/css/printer.css" media="print"

O Arquivo é definido como abaixo:

body {
font-family : sans-serif;
font-size : 12px;
margin: 0%;
padding: 0%;
width: 8.125in; 
}
.advertising {
display : none !important;
}
.hideToPrint { 
display : none !important;
}
.transparentPrint{
visibility: hidden !important; 
}
* {
border-collapse: collapse !important; 
}
td {
border:none !important; 
}

img {
display : none;
}
@page{
margin : 0%;
size: 8.125in 13in; /* width height */ 
}

Observe que a classe transparentPrint utiliza um atributo de visibilidade enquanto que a classe hideToPrint utiliza um atributo que define se um objeto deve participar da renderização. Objetos com atributos ocultos ocupam o espaço que seriam renderizados. Na verdade eles são renderizados como se fossem transparentes. Já os objetos com atributo display: none não ocupam espaço. No nosso caso, esse recurso é utilizado para os cabeçalhos ocuparem os espaços necessários no formulário sem que sejam imprimidos (os cabeçalhos dos campos dos formulários já estão impressos).
A página com a nota é definida com mesma escala e precisão do formulário. Por exemplo, para um formulário é definido em polegadas (8 ¼ x 13), da mesma forma que os campos. Utilizamos a definição de página:

@page{
size: 8.125in 13in; /* width height */ 
}

No HTML (ou JSP), definimos os campos com o mesmo cuidado:

<tr class="transparentPrint table_header" style="height: 0.375in"> 
<td style="width: 7.5in"></td>
<td style="width: 0.625in; font-weight: bolder;">Nº</td>
</tr>
<tr style="height: 0.25in"> 
<td style="width: 7.5in"></td>
<td style="width: 0.625in;">
<bean:write name="nota" property="numeroNota" />
</td>
</tr>

Com isso, conseguimos definir um HTML com definições precisas para impressão e visualização. Num cenário mais simples poderíamos associar um comando Javascript no botão de impressão.

<input type="button" class="hideToPrint" value="imprimir" onclick='window.print();'/>

Infelizmente, os navegadores de Internet interferem na impressão com suas próprias definições do tamanho do papel, margens e até cabeçalhos e rodapés o que nos impede tomarmos tal abordagem.