Muitas vezes temos que imprimir algo no nosso projecto flex, mas não sabemos bem como o fazer… ora, e se tivessemos diversos templates para imprimir o que quisermos ? facil não? pois é, neste tutorial vou explicar um processo bem simples de termos os nossos relatórios já praticamente prontos a receber dados para serem impressos… vamos por partes, criem um novo projecto com o nome testRelatorio. e depois criem uma pasta na raiz (normalmente src) desse projecto chamada print e dentro dessa pasta print criem uma nova pasta assets…
No meu exemplo uso o logo do blog, se quiserem seguir o tutorial, copiem a seguinte imagem e colem a seguinte imagem nessa pasta assets:
Logo
Vamos agora criar um novo componente. Menus: File->New->MXML Component e escolham as seguintes definições:
Novo MXML Component
Cliquem em Finish
Temos o nosso template, vamos colocar nesse template todo o código em baixo :
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="595" height="842" backgroundColor="#FDF8F8" backgroundAlpha="1">
<mx:Canvas x="33" y="34" width="526" height="775" id="safeArea">
<mx:Text y="10" text="Header" width="288" height="117" id="DOC_HEADER_TEXTO" color="#030303" right="10" fontFamily="Verdana" fontSize="13" fontStyle="italic" textAlign="right"/>
<mx:Canvas x="0" y="192" width="526" height="583" id="DOC_CONTEUDO">
</mx:Canvas>
</mx:Canvas>
<mx:Image x="33" y="34" source="@Embed(source='assets/logo.png')" id="DOC_LOGO"/>
<mx:Label x="33" y="185" text="Titulo" width="526" height="27" fontWeight="bold" fontStyle="normal" textAlign="center" fontSize="13" color="#CD3E06" id="DOC_TITULO"/>
<mx:Label y="805" text="Rodape" width="526" textAlign="center" horizontalCenter="0" id="DOC_RODAPE" color="#919394"/>
</mx:Canvas>
E pronto, temos o nosso template pronto, com areas de logo, header, titulo, conteudo e rodape, que deve estar como a imagem:
Parte 2 - template.mxml
voltamos à nossa aplicação criada no inico do projecto (testRelatorio.mxml) e vamos colar este código:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFDFD, #FFFDFD]">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dados:ArrayCollection = new ArrayCollection([{titulo: "Livro a", cod: "#5345", preco: "50 €"},{titulo: "CADER B", cod: "#553", preco: "12 €"},{titulo: "LIVRO FLEX", cod: "#5885", preco: "30 €"}]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{dados}" width="350" horizontalCenter="0" verticalCenter="0" id="minhaDataGrid">
<mx:columns>
<mx:DataGridColumn headerText="Cod." dataField="cod" width="30"/>
<mx:DataGridColumn headerText="Artigo 1" width="270" dataField="titulo"/>
<mx:DataGridColumn headerText="Preco" dataField="preco" width="50"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Imprime" width="350" horizontalCenter="0" verticalCenter="90"/>
</mx:Application>
Devemos ter algo como:
Parte 3 - testeRelatorio.mxml
Agora só falta a nossa função de imprimir.
vamos colocar no nosso testeRelatorio.mxml a seguir ao nosso arrayCollection:
import mx.printing.FlexPrintJob;
[Embed(source="print/assets/logo.png")]
private var logotipo:Class
private function imprime():void {
var modelo:template = new template;
modelo.visible=false;
addChild(modelo);
modelo.DOC_HEADER_TEXTO.text="Exmo. Sr. Antunes Costa\n\nRelatorio resumido das compras por pagar!";
modelo.DOC_LOGO.source=logotipo; //convem ser uma imagem já embebida, podemos usar caminho, mas a class é mais rapida a ser carregada e impede que haja falta de foto na impressão.
modelo.DOC_TITULO.text="RELATORIO FALTAS!"
modelo.DOC_RODAPE.text="Listagem de falhas de pagamento. Para mais informações contacte +225 554 25485";
modelo.DOC_CONTEUDO.addChild(minhaDataGrid); //adicionamos a datagrid como child do nosso conteudo
//adicionamos o modelo para ficar no stage, invisivel.
//declaramos o trabalho de impressão
var printJob:FlexPrintJob = new FlexPrintJob();
//iniciamos o trabalho de impressão
if(printJob.start()) {
//adicionamos a nossa pagina para imprimir
printJob.addObject(modelo);
//enviamos o trabalho para a impressora
printJob.send();
//removemos o nosso modelo do stage
removeChild(modelo);
}
}
e colocamos no nosso botão de imprimir, dentro da sua tag, o click=”imprime()”;
Pronto, salvem a vossa aplicação e corram o exemplo, cliquem em imprimir e vejam o quanto facil foi 
Se quiserem podem criar outros templates, das mais variadas formas e exemplos.. sendo que devem importa-lo e adiciona-lo ao stage sempre invisivel para não estragar a vossa aplicação… neste exemplo a datagrid desaparece porque a mudei de child…adicionando-a ao template. Se quiserem sempre visivel, criem uma nova datagrid igual no template.mxml com o nome DOC_DATAGRID e a quando da impressão adicionem-lhe o mesmo dataprovider:
modelo.DOC_DATAGRID.dataProvider=dados;
e voilá!
Dica. Se quiserem imprimir em pdf, ou usam o AlivePDF ou usam um driver da adobe para juntar uma impressora de pdf’s que envia o trabalho de impressão para esse driver que grava em pdf.
Podem ver o exemplo online com o códig fonte disponivel aqui
Espero que seja util.
Abraço.
18 Comentários
Parabéns pelo post, muito informativo, objetico e esclarecedor.
Abraço,
Silva Developer
Obrigado!
Abraço.
Mário muito bom! Abraço.
Muito bom Mario.
Ajudou bastante!
Boa noite Mário,
Este exemplo está muito bom!
Mas quando clico em imprimir escolho pdf e não faz nada.
Verificei que se comentar a linha “modelo.DOC_CONTEUDO.addChild(minhaDataGrid);” imprime tudo!
O que pode ser?? Tenho a versão 10 do flash, será isso??
E imprimir em multiplas páginas, podes ajudar-me?
Obrigado.
José Carlos Fonseca
Fafe – Portugal
Mas está a imprimir como? usando um driver de impressora de pdf’s?
Sim, quando clico no botao imprime surge o ecrã das impressoras e escolho a “Adobe pdf”, dou nome ao doc e confirmo.
Nesta altura começa a criar o pdf. Ao fim de alguns segundos esta janela fecha-se e não tenho o pdf criado.
Obrigado.
José Carlos Fonseca
Fafe – Portugal
Estranho… tente instalar e usar um dos drivers seguintes:
pdf995 Printer Driver – http://www.pdf995.com/download.html
Virtual Pdf Printer – http://www.download.com/1770-20_4-0.html?query=Virtual+PDF+Printer&tag=404&searchtype=downloads
ou o pdf creator ou até mesmo o cutePdf printer nessa mesma pagina…
teste depois conte o que aconteceu….
Já agora, usa que sistema operativo ?
Mário, já instalei o virtual pdf printer e mesmo assim não dá.
O estranho é que se eu usar o teu exemplo que tens nesta página funciona mesmo com a printer que tinha.
O sistema operativo é o XP Pro.
Humm.. mas se funcionava antes, o Sistema Operativo nada tem a ver, você seguiu todos os passos detalhadamente? adicionou bem os childs ?
Se estiver tudo correcto não sei o que se estará a passar… é que esse exemplo que tenho em cima funciona bem aqui…
Se puderes, envia-me o código fonte pra dar uma vista de olhos: admin[at]msdevstudio[ponto]com
cumps
De facto o código é exactamente o que tens no exemplo. Quando disse que funcionava é se eu usar o teu exemplo online.
Não faz mal, vou fazer o print da datagrid, para já, sem num cabeçalho ou rodapé. Obrigado na mesma, o teu exemplo já ajudou bastante.
Aproveito para pedir ajuda noutra questão, por acaso não tens nenhum exemplo em flex + mysql de pesquisa avançada?
Obrigado.
Olá, muito útil esse exemplo, funcionou legal aqui, mas se o datagrid tem muitos dados, e cria a scrollbar, só é impresso os primeiros dados visualizados (imprime até a scrollbar do datagrid). Como resolver isso? Gostaria que fosse impresso o restante dos dados em outras páginas. Obrigado por sua atenção.
Boas Reginaldo, esse é o problema… que também acontece numa caixa de texto no html normal, se imprimir uma pagina web com uma caixa de texto html e se esta tiver scrollbars vai verificar que o seu conteudo não será totalmente impresso…
uma das soluções é antes de imprimir verificar a altura da sua datagrid e no que diz respeito a multi-paginas as coisas complicam-se aplicadas a este exemplo, mas veja:
http://therush.wordpress.com/2007/01/06/flex-datagrid-printing/
http://flexed.wordpress.com/2006/12/26/customgrid-v10-or-searchgrid-v20/
este segundo link é um componente que permite imprimir a datagrid completa…
cumps.
Parabéns, excelente post, me ajudou muito. Abraço.
Muito simples e muito bom! Parabéns.
Utilizei o Primo PDF e funcionou tudo OK.
Mario… preciso fazer um TEMPLATE para imprimir na minha FOLHA HORIZONTALMENTE. (modo paisagem). Qual é a melhor dica ? Qual é o tamanho em PIXEL do meu TEMPLATE.MXML ? Obrigado.
Mario, como ficam as impressoes de charts?
Mario… como fasso para imprimir em modo paisagem?