VReport é uma extensão openSource escrita em javaScript(pequena biblioteca) voltada para desenvolvedores Web que necessitam criar relatórios com cabeçalho e rodapé, para serem impressos em todas as páginas na impressão. A extensão torna simples e profissional essa tarefa que a primeira vista parece simples de implementar, mas que na realidade pode se tornar complexa de acordo com o estilo do relatório a ser criado.
A página oficial da extensão, para download e informações adicionais é:
http://www.isecretaria.net/VReport/
A extensão é composta por 3 arquivos, não altere de forma alguma nenhum deles:
Na página do relatório é necessária a inclusão destes três arquivos citados, da seguinte forma:
<head> da seguinet forma:<link rel="stylesheet" type="text/css" href="VReport_print.css" media="print" /><link rel="stylesheet" type="text/css" href="VReport_screen.css" media="screen" /></body> ou </html>, pois ele organiza todo o arquivo depois que o relatório já foi criado. Se ele for inserido dentro da tag <head>, como é normal, ele não vai organizar o relatório de forma correta, já que “tal ainda não foi criado”. Este arquivo deve ser inserido da seguinte forma:<script src="VReport.js" type="text/javascript"></script>O cabeçalho, o rodapé e o conteúdo de todo o relatório podem conter qualquer tag HTML, bem como qualquer tipo de código dinâmico, seja PHP, ASP[.NET], JSP etc, e devem ser inseridos dentro da tag <body>, na ordem correta(cabeçalho, conteúdo, rodapé) da seguinte forma:
Os estilos dessas 3 div’s podem ser criados sem problemas, com uma pequena restrinção quanto à propriedade position. Se essa propriedade for setada para qualquer uma dessas três div’s, o relatório pode não sair como esperado.
Para visualizar a impressão de seus relatórios criados com o VReport, procure “visualizar impressão” ou “print preview” em seu navegador.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VReport blank example</title>
<!--
Aqui vem alguns estilos definidos para as div's do cabeçalho, conteúdo e rodapé, essas propriedas podem ser alteradas sem problemas
-->
<style>
#_VReportHeader {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
border-bottom: 1px dashed gray;
width: 100%;
padding: 3px;
text-align: center;
}
#_VReportFooter {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
border-top: 1px dashed gray;
width: 100%;
text-align: center;
}
#_VReportContent{
font-family:Tahoma, Geneva, sans-serif;
font-size: 14px;
}
</style>
<!-- Aqui vem o include com as folhas de estilos necessárias -->
<link rel="stylesheet" type="text/css" href="VReport_print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="VReport_screen.css" media="screen" />
<!-- Fim da inclusão das folhas de estilos ncessárias -->
</head>
<body>
<!--
Agora são criadas as div’s importantes relativas ao cabeçalho, conteúdo e rodapé, nesta ordem
-->
<div id="_VReportHeader">cabeçalho</div>
<div id="_VReportContent">conteúdo</div>
<div id="_VReportFooter">rodapé</div>
<!-- Aqui vem o arquivo responsável pelo processamento do relatório -->
<script src="VReport.js" type="text/javascript"></script>
</body>
</html>
<!-- Fim do relatório -->
Agradecimentos importantes:
IMPORTANTE: procure visitar a página oficial da extensão com uma freqüência razoável, para ficar atualizado com as novas versões que podem sair. Qualquer bug pode ser notificado pelo e-mail citado logo no início deste documento.
LICENÇA: o VReport pode ser utilizado por qualquer pessoa, para qualquer fim, sendo necessário apenas a citação no sistema ou site que utiliza a extensão.
Nota do Maujor: o texto desta matéria é de autoria do autor da extensão e publiquei, a pedido dele, para divulgar a extensão.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Não funciona com mais de uma página.
E mesmo com uma página precisei alterar as positions das divs.
=/
Bom dia...teria como imprimir o número da página em cada cabeçalho?
olá....preciso que em cada cabeçalho de pagina ele imprima o número da pagina... tem como?
aguardo....abraço!
não funcionou no chrome 4.1.249.1059
no ie e no firefox funcionou, no entanto, preciso dele no chrome, pois aqui a pouco tempo todos passaram a usar somente esse navegador.
Muito bom como sempre funciona!
Tem como forçar a quebra de página na impressão?
Procurei bastante por isso, e finalmente resolveu meu problema.
Obrigado!
salvou minha vida tambem, como esses posts são bens vindos, rsrs
Abraços
parabens pelo desenvolvimento de um pequeno javaScript que muita gente precisa.
parabens
salvou a patria
Caraca meu.. muito bom vlw por compartilha maujor
Muito bom de verdade!