Pular para o conteúdo principal

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.

Comentários

Postagens mais visitadas deste blog

Um texto pós-moderno - better man

Espere olhando para as horas... são 4 horas. Tem que parar. Nesse tom melancólico, começa a modesta música "better man", uma balada pop composta por Eddie Vedder ainda na adolescência. A música é a ilustração perfeita da ironia. O próprio título é irônico, uma vez que em momento algum na música aparece um better man. She lies and says she's in love with him, can't find a better man... Irônico, não!? Para começar, com a personagem central da história, a mulher que aguarda tarde da noite seu esposo... Ela chega a treinar com o espelho o fim do relacionamento. E o que faz? Diz a negação do que queria dizer. Vedder escreve músicas sobre sentimentos fortes. Sua relação com a mãe foi bastante complicada pelo o que descreve em suas canções. Na trilogia Mommy, Vedder descreve um homem perturbado com o relacionamento materno; a mãe mente para o filho sobre a identidade do pai, revela a verdade para o garoto na puberdade dizendo a ele como se parece com o verdadeiro pai e o

Pequeno manual do ócio em terras alemãs

  Pequeno manual do ócio em terras alemãs Como Lei alemã favorece aproveitadoras (e alguns aproveitadores que nunca tive o desprazer de conhecer)   Há algumas vias pelas quais pessoas de países em desenvolvimento migram para países como a Alemanha.   Por exemplo, é sabido que países desenvolvidos sofrem de escassez de mão-de-obra qualificada. Por esse motivo, países como a Alemanha dispõe vistos "especiais" para profissionais em demanda. Esse é o conceito do Blaukart (Blue Card) que na Alemanha se destina a profissionais salário anual seja superior a 55 mil euros ou 43 mil no caso de profissionais de áreas em alta demanda. Não há como recrutar essa mão-de-obra sem que a família desses profissionais também possa ser relocada. Então esses profissionais e seus familiares são relocados.   Além de se qualificar para essas vagas em demanda, ou ser parte direta da família qualificada, outra via possível para a imigração para o território alemão é através do matrimôni

O argumento anti-álcool

A lógica contra a produção do álcool é mais ou menos a seguinte: Os produtores capitalistas, produtores do combustível de humanos e máquinas irão preferir vender combustível mais caro para os mais ricos do que comida barata para os mais pobres. Máquinas e homens irão competir por combustível... Mas enquanto os ricos terão dinheiro para comprar comida e combustível o que sobrará aos pobres!? Vale lembrar que não importa se a produção é de cana ou de milho, a competição é pela terra e não pelo grão. Ainda, mesmo que o país agrícola taxe o produtor de combustível de maneira diferenciada ao produtor de comida, o governo teria maiores dificuldades em repartir o "bolo", haja vista que os governos que temos não são as instituições mais eficientes e, além do que, a comida estará mais cara. Ora, esquecem os "amigos" comunistas que a venda de biocombustível dará aos países agrícolas uma oportunidade ímpar de participar da economia mundial como protagonistas, e não meros fi