Relatório com HTML5

[Ronaldo Faria Storck Eler 2]

Olá,

 

Alguém já conseguiu fazer um relatório com paginação no rodapé com html e css?

 

Aqui tem um exemplo, http://www.perpetuumsoft.com/Demo/SSReports.Web/Web/StartPage.htm, mas eu queria sem componente, e mais simplificado, mas como faço para determinar se o relatório já ocupou o tamanho da página para inserir um page-break?

 

sds

 

[Higor Oliveira 0]

Cara, posso não ter entendido muito bem. Você quer determinar o tamanho da página, digamos, automático?

 

Abs.

[Ronaldo Faria Storck Eler 2]

Olá Higor Oliveira,

 

Bem, o que preciso é imprimir um cabeçalho do relatório e um rodapé, e quanto tiver um listagem, tipo uma nota fiscal, com muitos produtos, imprimir o cabeçalho com o nome das colunas em todas as páginas e evitar que corte as informações de uma página para outra, mas sem utilizar pdf...

 

sds

[Public2004 79]

Olá amigo, é meio complicado tratar esse comportamento uma vez que isso é determinado no navegador do usuário de acordo com suas preferências. Por mais que você faça um tratamento específico com "media=print", ainda assim dependerá do sistema e configurações pessoais do usuário...

 

A melhor forma que vejo para fazer isso é através da utilização de tabelas uma vez que na estrutura destas temos "cabeçalho, corpo e rodapé" - e desde que seja bem estruturada a sua tabela, haverá o comprtamento desejado na impressão ou seja, imprimir em todas as páginas cabeçalho e rodapé alterando os dados do corpo de acordo com a página.

 

Att.

[Ronaldo Faria Storck Eler 2]

Olá Public2004, obrigado pela resposta, tem algum link de referência para essa utilização das tabelas?

 

sds

[Public2004 79]

Olá Ronaldo, segue um exemplo (HTML) da estrutura correta para uma tabela. O CSS utilizado é apenas para melhorar a disposição do exemplo. Para verificar a funcionalidade que deseja (impressão de cabeçalho e rodapé em todas as páginas), acrescente mais linhas/células no exemplo e faça o teste.

 

CSS:

body {
    width:100%;
    margin:0 auto;
}
table {
    width:90%;
    margin:10px auto;
    border-collapse:collapse;
}
caption {
    padding:20px 0;
    font-weight:700;
}
table thead, table tfoot {
    background-color:#ccc;
}
table th, table td {
    border:#666 1px solid;
}

 

HTML:

<table>
  <caption> My Table </caption>
  <thead>
    <tr>
      <th>Title Col 1</th>
      <th>Title Col 2</th>
      <th>Title Col 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">My Footer Group 3 Cols</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Row 1 Cel 1</td>
      <td>Row 1 Cel 2</td>
      <td>Row 1 Cel 3</td>
    </tr>
    <tr>
      <td>Row 2 Cel 1</td>
      <td>Row 2 Cel 2</td>
      <td>Row 2 Cel 3</td>
    </tr>
    <tr>
      <td>Row 3 Cel 1</td>
      <td>Row 3 Cel 2</td>
      <td>Row 3 Cel 3</td>
    </tr>
    <tr>
      <td>Row 4 Cel 1</td>
      <td>Row 4 Cel 2</td>
      <td>Row 4 Cel 3</td>
    </tr>
    <tr>
      <td>Row 5 Cel 1</td>
      <td>Row 5 Cel 2</td>
      <td>Row 5 Cel 3</td>
    </tr>
  </tbody>
</table>

 

Espero que seja útil e aproveitando, segue alguns links de referência:

http://www.w3.org/TR/html401/struct/tables.html

http://www.w3schools.com/html/html_tables.asp

 

Att.

[Ronaldo Faria Storck Eler 2]

Olá Public2004,

 

agradeço a ajuda, mas não funcionou, não apareceu o cabeçalho em todas as páginas, mas vou continuar tentando aqui... até descobri uma forma de fazer com xsl, mas eu tenho que determinar um loop, por exemplo, 20 por página, só que na primeira página, teria que ser somente uns 15 ou 16, devido ao cabeçalho, mas, vamos tentando...

 

sds

[Ronaldo Faria Storck Eler 2]

Curioso, fiz algumas alterações e no firefox funciona (aparentemente), mas não no chrome...

 

@media print
{    
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
	td    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group; }
	tbody { display:table-row-group;}
}

Engraçado como são as coisas, o firefox desabilitou o plugin PRISM que ela legal para que fosse possível configurar o acesso de um sistema web em uma janela exclusiva, aí vem o google e permite isso, só que no firefox eu consigo gerar bem depois da ajuda de vcs um relatorio legal, e no chrome naum?

 

Pois é, como dizem, não se pode ter tudo...

 

 

 

sds

[Gilberto Jr 26]

Como eu sempre digo, informática não se entendi e sim aceita rsrs.

 

 

Att;

[xanburzum 169]

nem todas as funcionalidades do HTML5 e CSS3 funcionam perfeitamente no Chrome

[Ronaldo Faria Storck Eler 2]

pois é, vou fechando o tópico aqui, colocarei [resolvido], pois funciona no firefox!

 

Obrigado

[xanburzum 169]

muitas vezes com um CSSHack consegue até resolver

[Ronaldo Faria Storck Eler 2]

Só a titulo de [DICA] e complementando o tópico de relatório, fiz algo para os meus relatórios que talvez sirva pra alguém.

 

- Quando vou exibir um relatório coloco uma div com um botão voltar e as opções de imprimir, exportar para o word e excel,

- Quando clico em imprimir, ele retira a div com o botão voltar e os links, me mostra uma tela "limpa" e depois de imprimir retorna para a página normal (estou usando o chrome)

 

If sExporta = "1" Then 'word
	Response.ContentType = "application/vnd.ms-word"
	Response.AddHeader "Content-Disposition:", "attachment; filename=arquivo.doc"
End If
If sExporta = "2" Then 'excel
	Response.ContentType = "application/vnd.ms-excel"
	Response.AddHeader "Content-Disposition", "attachment; filename=arquivo.xls"
End If
If sExporta = "3" Then 'html
	' imprimir com tela "limpa"
	%>
    <script>
		window.print();
		setTimeout("redireciona()", 100) /// 1000 = 1s
		function redireciona()
		{
    		window.history.go(-1)
		}
	</script>
    <%
End If

e a div eu estou montando assim:

 

<% If sExportar = "" Then %>
<div id="barra-rpt">
	<p id="voltar"><a href="javascript:history.go(-1);">Voltar</a></p>
	<h2>Relatório</h2>
</div>
<% End If%>

Espero que possa ajudar e se alguém tiver alguma sugestão de melhoria, sempre aceito comentários, rs

 

sds

[xanburzum 169]

Case o mesmo esquema para fazer a impressão em CSS