Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Extensão vReport

Publicado em: 2009-09-6 — 20.714 visualizacoes

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 http://www.maujor.com/blog/2009/09/06/extensao-vreport/trackback no seu site.

13 comentários na matéria: “Extensão vReport”

  1. Carol SerrãoNo Gravatar disse:

    Não funciona com mais de uma página.

    E mesmo com uma página precisei alterar as positions das divs.

    =/

  2. AlexNo Gravatar disse:

    Bom dia…teria como imprimir o número da página em cada cabeçalho?

  3. CésarNo Gravatar disse:

    olá….preciso que em cada cabeçalho de pagina ele imprima o número da pagina… tem como?

    aguardo….abraço!

  4. GamaNo Gravatar disse:

    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.

  5. Imprimir com cabeçalho e rodapé e: quebra de página! « Joomlie's Blog disse:

    […] 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 […]

  6. elenNo Gravatar disse:

    Muito bom como sempre funciona!

    Tem como forçar a quebra de página na impressão?

  7. GabrielNo Gravatar disse:

    Procurei bastante por isso, e finalmente resolveu meu problema.
    Obrigado!

  8. zona sulNo Gravatar disse:

    salvou minha vida tambem, como esses posts são bens vindos, rsrs

    Abraços

  9. Marcelo NobreNo Gravatar disse:

    parabens pelo desenvolvimento de um pequeno javaScript que muita gente precisa.

    parabens
    salvou a patria

  10. GiovanniNo Gravatar disse:

    Caraca meu.. muito bom vlw por compartilha maujor

  11. BrunoNo Gravatar disse:

    Muito bom de verdade!

  12. RafaelNo Gravatar disse:

    Perfeito, precisava disso e não achava nada, salvou minha vida.

  13. Extensão criada pelo iSecretária publicada no maior blog de desenvolvimento Web do Brasil « iSecretária.net: blog oficial disse:

    […] O link fixo da publicação é http://www.maujor.com/blog/2009/09/06/extensao-vreport/ […]

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo