Link para imprimir página com JavaScript e jQuery

 

 

Enviado para você por Penha através do Google Reader:

 

 

Link para imprimir página com JavaScript e jQuery

via Pinceladas da Web - Movido a XHTML, CSS e WebStandards de Pedro Rogério em 15/01/09

É extremamente muito simples implementar um link para imprimir a página com JavaScript em seu site. Através do evento onclick podemos abrir a janela de impressão do browser para que o usuário possa imprimir a página. Uma forma não muito elegante, pois mistura JavaScript com a camada de conteúdo(HTML) seria a seguinte:

 <a href="#" onclick="window.print(); return false;">Imprimir</a> 

Utilizando jQuery, podemos fazer isso de uma forma muito simples, observem o código abaixo:

 $(document).ready(function() { 	$('a#print').click(function() { 		window.print(); 		return false; 	}); }); 

Suponhamos que em nossa página tenhamos um link com o ID print, ao clicar nesse link o evento click dispara a janela de impressão do Browser, possibilitando assim a sua impressão. Mas esse código possui uma deficiência, se o usuário estiver navegando com o JavaScript desabilitado, o link não terá mais funcionalidade alguma, a solução então seria criar esse elemento via JavaScript, e adicionar a possibilidade de impressão da seguinte forma:

 $(document).ready(function() { 	$('body').prepend('<a id="print" href="#">Clique aqui para imprimir</a>'); 	$('a#print').click(function() { 		window.print(); 		return false; 	}); }); 

Vejam no exemplo criado o script em funcionamento, experimente desabilitar o JavaScript e você verá que o link de impressão não é criado não atrapalhando em nada a navegação do usuário. Esse tutorial foi baseado no artigo original de Trevor Davis.

Isso pode lhe interessar:

• Carregar jQuery a partir do Google
• jQuery :random filter
• The Cloud Player - iTunes na web com jQuery
• Sistemas operacionais em JavaScript na Web
• Ler arquivos CSV com jQuery

---

Já conhece o meu novo blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

 

 

Coisas que você pode fazer a partir daqui:

• Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
• Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos

 

 

Share

Share |