Link para imprimir página com JavaScript e jQuery
Postado por: Pedro Rogério emÉ 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Pedro,
Falando em impressão, uma das coisa que é bem ruim no html é quando queremos desenvolver relatórios com diversas paginas (claro, html não é feito para isso né).
Tu tem alguma dica de como desenvolver bons relatórios com html e que suas impressões sejam fiéis?
[]´s
@Juliano,
Não entendi muito bem o que você precisa, mas com CSS você pode aplicar formatação para impressão, então, o site pode ter um layout e no momento de impressão pode ter outro. Uma coisa interessante que eu escrevi a muito tempo atrás é sobre como forçar quebras de página no momento da impressão com CSS:
http://www.pinceladasdaweb.com.br/blog/2007/02/08/forcar-quebras-de-pagina-com-css/
Pra mim ta sendo complicado fazer relatorios em HTML
O problema da quebra de pagina ja resolve… mas como configurar que o body é tamanho A4? se é retrato ou paisagem? como resolver isto?
Fiz uma função parecida, mas que pode imprimir dentro de iframes (por exemplo dentro de um iframe criado pelo thickbox):
function printWindow(window) {
$(window)[0].contentWindow.focus();
$(window)[0].contentWindow.print();
}
muito bom esse codigo parabéns
Blz rapaziada…
então… estou com uma dúvida.
de como faço para imprimir apenas uma parte da pág.
entende?
exemplo:
imprimir apenas esse TR
…
olá a todos!
Fiz uma pequena mudança pois eu tinha um problema com esse código!
Situação:> Minha DIV estava com overflow:auto; “barra de rolagem no css”, então quando eu ia imprimir não mostrava todo o conteúdo do código, pois a barra de rolagem ocultava o código.
Solução:> adicionei duas linhas no código.
$(document).ready(function() {
$(‘#container’).prepend(‘Click aqui para imprimir’);
$(‘a#print’).click(function() {
document.getElementById(‘container’).style.height=’100%’;
window.print();
document.getElementById(‘container’).style.height=’500px’;
return false;
});
});
aqui funcionou muito bem.
Muito obrigado estava procurando este código a muito tempo.