Se você é um desenvolvedor Flex de sistemas gerenciais com consultas ad-hoc como eu, se ainda não precisou, com certeza um dia irá precisar exportar os dados de uma Datagrid para o Microsoft Excel.

Abaixo mostrarei como realizar essa exportação.

Primeiramente precisamos construir nossa aplicação no Adobe Flex, para obter o resultado acima, copie o código abaixo.



	
		
	
	

Agora vem o primeiro pulo do gato, crie uma classe no Flex chamada DataGridExporter, em meu exemplo salvei a classe no diretório br.com.igormusardo.datagrid.

Nesta classe, temos duas funções loadDGInExcel e convertDGToHTMLTable, essas funções são responsáveis por receber uma Datagrid como parâmetro, ler o seu conteúdo, criar o código HTML que represente a DataGrid e finalmente passar o HTML gerado como parâmetro de uma página, no meu caso ASP.NET mas pode ser feito em PHP ou JSP, informada na variável urlExcelExport para que a aplicação server-side gere o arquivo .XLS e forçe o download para o cliente. Para tanto copie o código abaixo.

package br.com.igormusardo.datagrid
{
    	import flash.errors.*;
    	import flash.events.*;
    	import flash.external.*;
    	import flash.net.URLRequest;
    	import flash.net.URLRequestMethod;
    	import flash.net.URLVariables;
    	import flash.net.navigateToURL;

	public class DataGridExporter
        {
	        //Aplicação servidor que gerará o excel
	        public var urlExcelExport:String = "ExcelExport.aspx";


	        // Converte a datagrid para uma tabela html
	        private function convertDGToHTMLTable(dg:*):String {
	        	var font:String = dg.getStyle('fontFamily');
	        	var size:String = (int(dg.getStyle('fontSize'))-2).toString(); //Reduz em 2, o tamanho da fonte.
	        	var str:String = '';
	        	var colors:String = '';
	        	var style:String = 'style="font-family:'+font+';font-size:'+size+'pt;"';
	        	var hcolor:Array;

	        	if(dg.getStyle("headerColor") != undefined) {
	        		hcolor = [dg.getStyle("headerColor")];
	        	} else {
	        		hcolor = dg.getStyle("headerColors");
	        	}

	        	str+= '';

	        	for(var i:int = 0;i"+dg.columns[i].headerText+"";
	        		} else if (dg.columns[i].visible == true) {
	        			str+= "";
	        		}
	        	}
	        	str += "";
	        	colors = dg.getStyle("alternatingRowColors");

	        	for(var j:int =0;j";

	        		for(var k:int=0; k < dg.columns.length; k++) {
	        			if(dg.dataProvider.getItemAt(j) != undefined && dg.dataProvider.getItemAt(j) != null && dg.columns[k].visible == true && dg.columns[k].dataField != "Melhor") {
	        				if(dg.columns[k].labelFunction != undefined && dg.columns[k].labelFunction != null && dg.columns[k].visible == true) {
	        					str += "";
	        				} else {
	        					str += "";
	        				}
	        			}
	        		}
	        		str += "";
	        	}
	        	str+="
"+dg.columns[i].dataField+"
"+dg.columns[k].labelFunction(dg.dataProvider[j],dg.columns[k])+""+dg.dataProvider.getItemAt(j)[dg.columns[k].dataField]+"
"; return str; } // Envia o HTML para a aplicação servidor public function loadDGInExcel(dg:*):void { var variables:URLVariables = new URLVariables(); variables.htmltable = convertDGToHTMLTable(dg); var u:URLRequest = new URLRequest(urlExcelExport); u.data = variables; u.method = URLRequestMethod.POST; navigateToURL(u,"_self"); } } }

Após criada a classe, é necessário atribiuir uma função que executará o loadDGInExcel. Inclua o código abaixo ao seu código fonte action script.

private function exportar():void
{
	var dgE:DataGridExporter = new DataGridExporter();
	dgE.loadDGInExcel(dgDado);
}

E por fim, atribua a função exportar() ao click do botão, como o código abaixo.


Pronto, no Adobe Flex, não é necessário fazer mais nenhuma alteração, agora o trabalho fica por conta da aplicação server-side. No Visual Studio, crie um novo arquivo chamado de ExcelExport.aspx, e inclua a tag ValidateRequest=”false” no cabeçalho do arquivo aspx, como abaixo.

<%@ Page Language="vb" ValidateRequest="false" AutoEventWireup="false" CodeBehind="ExcelExport.aspx.vb" Inherits="Flex.ExcelExport" %>





    


    

A parte de codificação, receberá o parâmetro htmltable, vindo do Flex que renderizará com o ContentType “application/vnd.ms-excel” com o nome de ExportaExcel.xls tudo isso dentro da função Page Load.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.Clear()
        Response.ContentType = "application/vnd.ms-excel"
        Response.AddHeader("content-disposition", "attachment;filename=ExportaExcel.xls")
        Response.Charset = ""
        EnableViewState = False
        Request.ContentEncoding = System.Text.Encoding.UTF8
        Response.Write(Request("htmltable"))
        Response.End()
    End Sub

Dessa forma, quando o Flex enviar o htmltable, o navegador exibirá a janela padrão de download, para o arquivo recém criado.

E pronto! Sua aplicação Adobe Flex já exporta os dados de uma Datagrid para o Excel.

Duvídas e feedbacks são sempre muito bem-vindos.

Sucesso e divirta-se.

About Author

You may also like

19 Response Comments

  • João Paulo Braga  29/10/2008 at 15:43

    Oi Igor, parabéns pelo exemplo, está simples, prático e funcional.

    Só gostaria de acrescentar que é possível exportar para o Word modificando o content-type do Response:

    Response.ContentType = “application/vnd.ms-word”

    E exportar como ExportaDados.doc.

    Abraços.

    Responder
  • Igor Musardo  29/10/2008 at 16:48

    João Paulo, primeiramente, obrigado pelo seu Feedback.

    De fato, alterando o ContentType o sistema passa a exportar para outros formatos!

    Valeu a sugestão!!!

    Responder
  • Leurimar Lins  17/11/2008 at 13:56

    Olá Igor…mt bom o exemplo…inclusive ja estou usando em um projeto aqui…e te agradeco por ter me ajudado bastante c/ este exemplo…
    Bom…gostaria de saber se vc tem algum interesse de fazer um exemplo exportando os charts do flex pra pdf ou importar em um excel…
    agradeco…

    Responder
  • Berkowitz  30/01/2009 at 17:12

    Lembrando que dá pra fazer a exportação sem precisar do .NET (ou outra linguagem). Basta importar a classe FILEREFERENCE e salvar o html gerado:

    var fr:FileReference = new FileReference();
    fr.save(str,”arquivo.xls”);

    Responder
  • Farnetani  15/03/2009 at 19:12

    Campeão…como ficaria os 2 arquivos em PHP? E aonde devo colocá-los?

    Responder
    • Igor Musardo  16/03/2009 at 10:08

      @Farnetani, infelizmente não conseguirei te auxiliar com relação ao PHP pois possuo pouco conhecimento sobre essa tecnologia.

      Responder
  • Andre  08/04/2009 at 15:37

    Nao entendi onde se deve colocar o ultimo codigo com o protected sub…

    Responder
  • mlf  06/07/2009 at 14:32

    achei muito util a sua matéria

    Responder
  • Rubens Mendonça  20/07/2009 at 15:31

    Para quem quer utilizar PHP, código ficaria da seguinte forma:

    <?php

    header('ETag: etagforie7download'); //IE7 requires this header
    header('Content-type: application/octet_stream');
    header('Content-disposition: attachment; filename="rapportage.xls"');

    //Add html tags, so that excel can interpret it
    echo "

    “.stripslashes($_POST[“htmltable”]).”

    “;
    ?>

    Cole esse código para o arquivo ExcelExport.php

    Até +++

    Responder
  • Willian  05/08/2009 at 12:52

    Meus Parabens, otimo conteudo.

    Estou tendo um pouco de dificuldade, como que eu posso montar esse codigo utilizado o java…

    Responder
  • Fábio Rocha  13/08/2009 at 13:19

    Maravilha cara, funciona perfeitamente com PHP.

    Obrigado pelo Post!!!!

    Responder
  • Andersen  18/08/2009 at 10:00

    Caros,
    Alguem conseguiu usando java… ?
    Abraços

    Responder
  • Edson  18/08/2009 at 17:54

    Parabéns pelo artigo, muito bom.
    Aproveitando: alguém conseguiu fazer em jsp? tentei e não consegui. Pelo .NET foi ok…

    Responder
  • Daliano  18/04/2010 at 13:39

    Excelente e simples do jeito que deve ser e do jeito que gosto….. hehehehhehehhehehhe….. mas e o inverso segue a mesma lógica????? sou novo no mundo do desenvolvimento…….

    Responder
  • siqueira  04/10/2010 at 02:31

    ola!
    Muito bom seu site bom, me ajudou um montão.
    mais gostaria de aproveitar para lhe fazer uma pergunta que parece ser básica, mais ja andei na net um bom tempo e não achei nada sobre isso.
    coloquei um icone numa coluna como seu exemplo no site, só que ele não mostra simplesmente só aparece um quadrado aonde deveria aparecer o desenho do icone.pode me dar uma força nesse sentido?

    deste agradeço pela atenção

    Responder
  • Valteci Oliveira  18/11/2010 at 14:41

    Igor,

    PARABÉNS pelo post. Super fácil de entender e muito providencial. Eu estava precisando exatamente de uma rotina que fizesse este tipo de exportação.

    Agradeço tb ao “Berkowitz ” pelo dica de utilizar a classe FIleReference para gerar o arquivo diretamente no flex.

    Obrigado a vcs pela ajuda e novamente Parabéns Igor pelo post e pelo blog em geral.

    Responder
  • Arthur  14/07/2011 at 10:07

    Estou com a seguinte situação:

    Tenho uma coluna no meu datagrid onde tenho o código do pedido (Ex: 8457888544000015), quando eu envio para o excel ele substitui o “15” por “00” então ele chega no excel da seguinte forma: 8457888544000000. Isso devido ao fato da solução entender que é um campo numerico. Onde posso ta mostrando para a aplicação que esse campo é um texto? Na saida do flex está ok, é no momento da geração do excel que está dando o problema.
    Abraços

    Responder
  • Carlos Eduardo  22/01/2016 at 14:09

    Igor, boa tarde.

    Seu post é uma grande fonte. Pergunto, você teria como me enviar os fontes deste exemplo. Adobe Flex – Exportar Datagrid para Excel

    Fico no aguardo.

    Responder

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.

Time limit is exhausted. Please reload CAPTCHA.