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

Expressões, preconceito e racismo

Expressões preconceituosas e racistas Antes de alguma outra frase, primeiro peço licença para falar de mais um assunto do qual não domino. Falo por acreditar que um leigo presta serviço maior ao debater assunto com base em fontes (ainda que seja uma Wikipedia) e no pensamento lógico do que simplesmente se manter mudo a questões do cotidiano. Em voga agora está em falar quais são ou eram as expressões preconceituosas e racistas que até a pouco eram toleradas em muitos meios.
Como é covarde dizer que em boca fechada não entra racismo. O racismo não é perpetrado apenas por quem profere mas por quem se cala à agressão perpetrada a outrem. Mas veremos que a questão é muito mais complexa que os cães raivosos do politicamente correto querem dizer.
Tomo aqui a palavra racista, como sendo algo usado para impor a dominação de uma “raça” sobre outra. Portanto, a acusação de racismo vai muito além da mera acusação de preconceito. Não tenho o menor apreso por vitimismo barato, onde expressões que…

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 leva …

Curry with JS

Partial application and currying with Javascript In the strict way, currying is the technique of transforming a function that takes multiple arguments (a tuple of arguments) to one function that receive only one. In such way, currying techniques allow transform one multi-parameter function in a chain of functions, each one with a single argument. Looks complicated? Blah.. it is not true.
In this little article, we are actually more interesting in partial applications. Let’s take the Mozilla Example for replace function in String. As we know, we can use a “replacer” function as paramenter for replace method in String object.
Let’s say that we want to split a String defined by a non-numerical part, a numerical part and finally a non-alphanumeric part. Here is how:
function replacer(match, p1, p2, p3, offset, string){ // p1 is nondigits, p2 digits, and p3 non-alphanumerics return [p1, p2, p3].join(' - '); }; We can try it as usual…
var newString = "abc12345#$*%".r…