Extensão vReport
Publicado em: 2009-09-6 — 27.062 visualizacoes
- VReport: Documentação
- por Vinícius Nunes Lage
- op.vini@gmail.com / www.isecretaria.net/vinicius
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:
- VReport.js: biblioteca escrita em javaScript que executa todo o processamento
- VReport_print.css: folha de estilo que define as propriedades corretas para impressão
- VReport_screen.css: folha de estilo que define as propriedades corretas para exibição na tela do navegador
Na página do relatório é necessária a inclusão destes três arquivos citados, da seguinte forma:
- As folhas de estilos devem ser incluídas dentro da tag
<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" /> - O arquivo VReport.js, responsável pelo processamento do relatório, deve ser incluído ao final da página do relatório, por exemplo antes de
</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:
- O cabeçalho deve ser definido dentro de uma div com id=”_VReportHeader”:
<div id=”_VReportHeader”>aqui vem o cabeçalho</div> - O conteúdo deve ser definido por completo dentro de uma div com id=”_VReportConten”:
<div id=”_VReportContent”>aqui vem o conteúdo completo</div> - O rodapé deve ser definido dentro de uma div com id=”_VReportFooter”:
<div id=”_VReportFooter”>aqui vem o rodapé</div>
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.
Exemplo simples de um relatório usando VReport
<!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:
- Câmara Municipal de Ouro Preto
- Leonardo Basílio
- Rafael Capucho
- Rafael Gomes
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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2009-09-6 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2009/09/06/extensao-vreport/trackback no seu site.
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.
[…] do Dinossauro (http://www.maujor.com/blog/2009/09/06/extensao-vreport/), com ele aprendi a colocar cabeçalho e rodapé na página de impressão, usando VReport uma extensão opensource (é um javascript que vc instala – NÃO tenham […]
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!
Perfeito, precisava disso e não achava nada, salvou minha vida.
[…] O link fixo da publicação é http://www.maujor.com/blog/2009/09/06/extensao-vreport/ […]