Leandro Garcia

Como imprimir em Javascript?

Certa vez precisei incluir a funcionalidade de impressão em um sistema. Deveria imprimir um relatório, mas tendo a opção de imprimir ao clicar em um botão.

Pesquisei e encontrei uma fucionalidade em Javascript que faz isso, window.print();

Essa funcionalidade passou a estar disponível a partir da versão 4.0 do internet explorer. Hoje, até onde sei, está presente em todos os browsers atuais.

Qual é a vantagem desta funcionalidade?

Não obriga o usuário a ir em arquivo -> imprimir ou Ctrl+p. Além desta facilidade, lhe dá mais opções para layout.

Abaixo a função para impressão

<script type="text/javascript">
   function DoPrinting(){
      if (!window.print){
         alert("Use o Netscape  ou Internet Explorer \n nas versões 4.0 ou superior!")
         return
      }
      window.print()
   }

</script>

Esta função deve ser incluída entre as tags header de seu HTML ou em um arquivo externo .js que você deve linkar.

dentro do body

<input type="button" value="imprimir" onClick="DoPrinting" id="botao" />

Legal, mas o botão também foi impresso. Eu não preciso do botão impresso.

Temos como não imrprimir o botão, mas vamos fazer de uma maneira melhor. Vamos configurar o layout de impressão.

Como?

Através de CSS.

<style rel="stylesheet" type="text/css" media="print">
   #botao{display:none}
</style>

Como formatar, vai da sua imaginação.

Abraços

9 Comentários »

Comentário por Roberto Silva — 10/02/2009 @ 5:01 pm

Cara…para não tirar o botão de imprimir até que é facil, mas…como é que faz para tirar a url, a data, a hora e os numeros de paginas, pois ao mandar imprimir, eles estão sendo impressos tambem, tem como tirar e imprimir somente o conteúdo?
Comentário por Lincoln — 07/12/2009 @ 10:28 pm

para DIVs com overflow, a impressao soh pega o que está aparente na tela, e não no conteúdo todo da DIV.

Isso é horrivel para imprimir um termo de contrato por exemplo.

tem alguma solução?

obrigado!
Comentário por Leandro Garcia — 14/12/2009 @ 6:54 pm

Olha, eu nunca fiz testes para esse tipo de situação, mas uma coisa que talvez funcione, é você criar um CSS só para impressão e nesse CSS você colocar a propriedade da dua div como auto. Mais ou menos assim:

div.contrato{overflow:auto}

Faça o teste talvez funcione, eu não testei.

Dando certo avisa, que eu atualizo o post e coloco sua dica.
Comentário por Leanadro piva da Costa — 10/12/2010 @ 2:29 pm

Por gentileza, quando vai imprimir no javascript, só imprime no modo retrato. Gostaria de saber se tem como imprimir no modo paisagem?
Estou aguardando
Obrigado
Comentário por leandro garcia — 14/12/2010 @ 3:19 pm

A orientação do papel é uma configuração do navegador da pessoa, de modo que os navegadores não permitem que você mexa nas configurações do usuário.
Comentário por Winters — 24/06/2011 @ 2:52 am

Fiz tudo como manda, e não acontece nada quando clico no botao ;affff
Comentário por leandro garcia — 28/06/2011 @ 3:10 pm

Estranho. Deveria abrir a janela de impressão.
Comentário por Alline — 16/09/2011 @ 2:31 pm

eu também fiz tudo como manda e quando clico no botão não acontece nada. =´(
Comentário por Ricardo — 29/09/2011 @ 10:48 am

Para facilitar crie um link da assim
Imprir