Criando telas diferentes para impressão e visualização em um formulário

Em muitos formulários web, temos inúmeros campos que devem ser exibidos para o usuário introduzir informações.
Entretanto, na hora de imprimir, muitas vezes o usuário deseja que os dados sejam concentrados em uma única página
ou que sejam formatados em uma máscara diferente da máscara utilizada para a introdução de dados.

O exemplo a seguir demonstra como fazer isto, utilizando javaScript e DIV’s.

O segredo está em utilizar as DIV’s, uma para dados do usuário e outra para impressão.
Após criar suas DIV’s acrescente o evento onload que irá chamar uma função para ocultar a DIV de impressão e exibir a DIV do usuário.
Acrescente o evento onbeforeprint que irá exibir a DIV de impressão e ocultar a DIV do usuário.
Acrescente o evento onafterprint que irá voltar a exibição normal do documento.






Form de teste


Aqui é o que aparecerá para o usuário

Aqui é o que aparecerá na impressão



Back To Top