JS: Botão para imprimir

Enviado por Webmaster em Julho 24, 2011 - 16:14

-Faça um botão para imprimir a página atual-

 

A impressão de páginas web pode parecer contra-intuitivo para nós webmasters acostumados a ler tudo em uma tela, mas não devemos subestimar a grande (e útil afinal) demanda dos usuários. Os usuários podem querer imprimir para ter uma referência em papel ou simplesmente para ler mais tarde no metrô por exemplo. As razões não importam muito e é tão simples de fazer este botão que vale a pena. Funciona assim:

 

O botão de impressão

Na verdade, você não vai imprimir a página atual, você vai redirecionar o usuário para uma página de impressão que irá automaticamente se auto-imprimir.


<form action="minhapaginaimprimivel.html" target="_blank">

<input type=submit value="Imprimir">

</ form>

Todo o segredo está nesta segunda página que você vai abrir em uma nova janela, imprimir e fechar, tudo automaticamente.

A página para impressão

O primeiro passo é fazer com que esta página seja adaptada para a impressão. A minhapaginaimprimivel.html irá conter apenas as informações essenciais (sem cabeçalhos, rodapés ou barras laterais), sem cores (só se for absolutamente necessário), sem animações ou funções interativas... emfim, você entendeu a idéia, essa página deve se parecer muito com uma página de um livro. Para tornar isso mais fácil, você pode anexar um arquivo CSS diferente daquele que você usa para o conteúdo original, um CSS que seja específico para todas as páginas « imprimíveis » ao invés de usar aquele CSS super bonito que você usa normalmente no teu site.

O segundo passo é bastante simples e faz toda a magia do botão de impressão acontecer. Na tag body da minhapaginaimprimivel.html você deve adicionar esta instrução javascript:

<body onload="window.print();window.close()">

Essa tag mágica vai, em primeiro lugar, abrir uma janela solicitando ao usuário de configurar sua impressora como para uma impressão normal, uma vez que o usuário clicar em imprimir ou cancelar a página se fechará automaticamente e o usuário volta para a página original (onde está o botão de impressão) enquanto a página começa a ser impressa.

É só isso! A única coisa que você realmente tem que pensar é como criar uma página que seja bonita no papel. Uma vez que você criou todas as regras de estilo direitinho, apenas aplique estas regras CSS para todas as outras páginas que for preciso imprimir. É uma boa prática fazer isso, embora não para incentivar a impressão em excesso, como todos nós sabemos nosso planeta sofre de consumo inconsiderado. Dito isto, às vezes uma página impressa pode economisar a eletricidade que você gastaria lendo no computador!

 


Comentar