Relatório com HTML5

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

Abs.

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

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.

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

sds

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;
}

 width:90%;
 margin:10px auto;
 border-collapse:collapse;
}

 padding:20px 0;
 font-weight:700;
}

 background-color:#ccc;
}

 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.

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

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

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

Att;

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

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

Obrigado

muitas vezes com um CSSHack consegue até resolver

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>
 <%

<% If sExportar = "" Then %>

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

sds

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