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 — 18.848 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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