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

Answering: top reasons I hate living in Brazil

Yes, some guys shared a teasing topic about “Top reasons why I hate living in Brazil”: http://www.gringoes.com/forum/forum_posts.asp?TID=17615&PN=1&title=top-reasons-i-hate-living-in-brazil What is the point here? The whole text is loaded of cliclés, people that you will hardly find, etc most of time just pissing people off.   I don’t think Brazil is the best country in the world. Also, I don’t think Brazilians don’t make mistakes. Actually we do all the time but most of us really care about our mistakes specially those were pointed out. Some feel like an expatriate, alien in own country. Others reflect about how we could improve. Others  simply don’t accept teases from John Does. So, I’m actually truly bothered with people believing in a bunch of false statements (specially Brazilians) or supporting some cynical arguments disguised “sincere” criticisms . Yes, I make mistakes all the time, and as most of Brazilians, I don’t speak English. However, I will