Ponto Fla - Laboratório de Idéias

Um pouco sobre css, design, jquery e desenvolvimento web

Imprimindo apenas o conteúdo de uma div

janeiro19

Aqui no meu trabalho surgiu esse problema, precisavamos imprimir um conteúdo de uma div sem enviar esse conteúdo para outra página ou para um pop por exemplo.
Deveria abrir direto a opção de imprimir, e na página existem vários outros conteúdos que não deveriam ser impressos.
Depois de muito pensar e com a ajuda do Edu chegamos a seguinte solução:

Clique aqui para ver o exemplo funcionando.

Nesse exemplo deixei o iframe aparecendo para vocês conseguirem visualizar que o conteúdo da div onde tem o botão imprimir está aparecendo no iframe e será o conteúdo impresso.

Então vamos lá vou explicar como foi feito:

O javascript:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function(){
$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" > </iframe>');
var conteudo = $('#grupo_content')[0];
var ifr = window.open("", "contFrame", "")
ifr.document.open()
ifr.document.write(conteudo.innerHTML)
ifr.document.close()
$('#print').click(function(){
	ifr.print();
});
});

O html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<body>
<div class="content">
<div class="conteudos">
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
</p>
<p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
	</p>			
</div>
<div class="conteudo-impressao">
<p>
	<a href="#" title="IMPRIMIR" id="print" >IMPRIMIR</a>
</p>
<div id="grupo_content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
	</p>
        <p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
		</p>
		</div>
	</div>
</div>	
</body>

O css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.content {
margin: 10px auto;	
text-align: left;	
width: 500px;
}
.conteudos, .conteudo-impressao {
width: 500px;
border: 1px solid #cecece;
padding: 5px;
}
.conteudo-impressao {
border: 1px solid red;
margin-top: 20px;
}
.txtIframe {
visibility: hidden;
height: 0;
}

Nesse script criamos um iframe dentro da div com a classe “conteudo-impressao”*
Depois criamos uma variável e nela armazenamos o conteúdo da div com o id “grupo_content” colocamos o ‘[0]‘ porque em jQuery ele retorna um objeto jQuery utilizando o ‘[0]‘ ele retorna o objeto html
Criamos uma variável “ifr” e fazemos abrir “uma janela” dentro do iframe com o name “contFrame”
Depois disso precisamos abrir o documento e na linha 6 escreve-se o conteudo armazenado na variável “conteudo”, na linha seguinte fechamos o documento.
Criamos então uma função dizendo que quando clicarmos no link com o id “print” vamos imprimir o conteudo da variável “ifr”

*Para utilizar esse exemplo o iframe não deve ficar visível na página para isso basta colocar no iframe a classe “txtIframe”:

1

$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" class="txtIframe"> </iframe>');
posted under dicas, jQuery | 2 Comments »