quinta-feira, 15 de janeiro de 2009

Link para imprimir página com JavaScript e jQuery



 
 

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

 
 


É 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:


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?


Blue Host


 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

0 comentários:

;

Pesquisa na WEB

Carregando...

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também