Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

darkangel13

impressão cabeçalho fixo

Por , em Desenvolvimento frontend

Recommended Posts

darkangel13    0

darkangel13
Postado

Olá, tenho um cabeçalho para ser impresso em um relatorio com logo e endereço, gostaria de saber como faço para caso o relatorio tenha mais de uma pagina ele repita na proxima pagina o mesmo logo e o endereço... para imprimir estou utilizando o media="print" do css... mas como deixa-lo fixo a todas as paginas?

 

 

exemplo do meu cabeçalho:

<div class="mostraImpresao" align="center" style="width: 100%; float:left;">
         <img style="float: left;" src="../imagens/logo.png"/>
         <b><p style="max-width: 380px; float: left;text-align:left;margin-left: 15px;">endereço</p></b>
 </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

A resposta é bem simples. Uma palavra só: semântica! Sim, sim. Just it. Imagem Postada

 

Sempre faço minhas tabelas semânticas, mas como nunca testei nenhuma aplicação minha para impressão, não sabia disso.

 

Pesquisei sobre as propriedades page-break-after e page-break-before (não as conhecia muito bem) e aprendi bastante. Mas ainda não servia ao caso deste tópico. Tá tá... Daria para fazer com uma baita de uma gambiarra. Ia fazer isso, aliás, fiz. heheheh Mas foi aí que percebi que era burrada. Imagem Postada

 

Em fim, o que você precisa fazer é colocar um thead. Ele faz o trabalho pra você. Exemplo:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tabelas semânticas</title><style type="text/css">*{	margin: 0;	padding: 0;}body{	font-family: sans-serif;}#contact{	width: 400px;	border: 1px solid #000;	border-collapse: collapse;}#contact caption{	background: #dbe9ff;}#contact thead tr{	height: 30px;	background: #dbe9ff;	border-bottom: 1px solid #000;}#contact tbody tr{	margin: 5px 0;	border-bottom: 1px solid #000;}#contact tbody tr:hover{	background: #ccc;}#contact tbody td{	border-right: 1px solid #000;	text-align: left;	padding: 2px 5px;}</style></head><body><table id="contact" summary="Contatos da empresa XYZ">	<caption>Clientes</caption>	<thead>		<tr>			<th>Nome</th>			<th>Telefone</th>			<th>E-mail</th>		</tr>	</thead>	<tbody>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>		<tr>			<td>Sheldon</td>			<td>1234-5678</td>			<td>sheldon@mail.com</td>		</tr>		<tr>			<td>Leonard</td>			<td>8765-4321</td>			<td>leonard@mail.com</td>		</tr>		<tr>			<td>Rajesh</td>			<td>1324-5768</td>			<td>rajesh@mail.com</td>		</tr>		<tr>			<td>Howard</td>			<td>3142-7586</td>			<td>howard@mail.com</td>		</tr>		<tr>			<td>Panny</td>			<td>1827-3645</td>			<td>penny@hot.com</td>		</tr>	</tbody></table></body></html>

 

Testei apenas no Firefox pelo "Visualizar Impressão".

 

:thumbsup:

 

P.S.: Você não citou tabela em nenhum momento, mas acho que para o seu caso seja a tabela. Se não for, tente usar as propriedades CSS que mencionei. Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoyalFlush    0

RoyalFlush
Postado

Olá's

Não sou de desenterrar tópicos, prefiro apenas ler a maioria, mas este aqui me interessou

(Ok, soh interessou pq estou com um problema semelhante para resolver)

 

Imprimir relatórios com cabeçalhos aqui esta uma verdadeira luta, o Thiago (como era de se esperar)

foi extremamente preciso ao dizer que o "caminho" seria a semântica, mas hj em dia isso é uma faca

dois gumes, quanto mais "web standards" tentamos ser, mais apanhamos para ser "cross-browser"

 

Estou apanhando aqui com o mesmo problema citado pelo DarkAngel13, inicialmente resolvi apenas padronizando

a tabela (momento de felicidade, correu td bem), mas entao surge a necessidade de usar um cabeçalho

maior, ok deu para resolver com css:

 

thead { display:table-header-group;margin:0;padding:0;}
tfoot {display: table-footer-group;margin:0;padding:0;}

 

E então surge a necessidade de um cabeçalho extremamente grande, 10 linhas por 18 colunas.

 

Já testei até o VReports.js e nada . . .

Estou tentando adaptar oq o vreport faz usando jquery e mais um pouco de css, mas até agora esta bem complicado.

Se alguem tiver uma sugestão eu particularmente aceito de bom grado.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito