ExtJS: Exportar de GRID para Excel

Posted by Loiane | Posted in Ext JS | Posted on 08-02-2010

3

Esse tutorial irá abordar como exportar dados de um ExtJS DataGrid para um arquivo Excel.

Às vezes, o usuário deseja exportar os dados de um graid para um arquivo excel (.xls ou .csv).
Existe um plugin ExtJS desenvolvido por terceiros que faz isso para você.

Existem alguns “probleminhas” que você deve saber antes de começar:

Só funciona em browsers que suportam data URLs (URL com dados), como Firefox, Opera e IE8.
Testei com as seguintes versões do ExtJS: 2.2.1, 3.0, 3.0.3 e 3.1, mas só funcionou na versão 3.0. Se alguém estiver usando alguma outra versão e conseguir fazer funcionar, me avise, pois posso ter esquecido de algum detalhe.
Só funcionad com os dados que estão no data Store – se você usar paginação, então crie um método para exportar no lado servidor. Esse plugin apenas é útil para quem desejar exportar uma pequena tabela para o Excel (todos os dados visíveis na tela).
Se os dados no Store forem voláteis (podem mudar, sofrer update, etc), a URL para exportação deve ser recalculada.

Vamos começar:

Primeiro, crie um arquivo javascript no projeto e cole o seguinte código (criei um arquivo exporter.js): http://github.com/loiane/extjs-export-excel/blob/master/WebContent/js/exporter.js (esse arquivo tem muitas linhas, por isso não coloquei/colei o conteúdo aqui).

E no código que contém o grid, adiciona o seguinte código:

var linkButton = new Ext.LinkButton({
        id: 'grid-excel-button',
        text: 'Export to Excel'
});

//create the Grid
var grid = new Ext.grid.GridPanel({
    bbar: new Ext.Toolbar({
        buttons: [linkButton]
    })
});

linkButton.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' +
Base64.encode(grid.getExcelXml());

Se tentar exportar a tabela da figura (por exemplo) para o arquivo excel, vai ficar mais ou menos assim:

Você também pode trocar as cores, fontes, etc. Dê uma olhada no código do exporter.js, tente enterder e faça a mudanças que desejar.

Ed Spencer também desenvolveu um plugin similar. O código fonte dele está mais limpo que este. Porém, o arquivo Excel gerado será o mesmo.

Você pode fazer o donwload do projeto exemplo (JEE) do meu repositório GitHub: http://github.com/loiane/extjs-export-excel

Bons códigos!

Posts Similares

Comments (3)

Como Importar Arquivo Excel para um ExtJS DataGrid usando DataDrop Grid Plugin \| Loiane Groner said on 08-03-2010
	[...] achei nenhum plugin que fizesse isso no forum ExtJS que funcione como o plugin para exportar dados do grid para excel; isto é, em plugin que não precise de nenhum código no lado servidor – bem, se quisesse [...]

Rogério said on 05-04-2010
	Boa tarde Loiane, sabe como posso exportar minha grid utilizando o ext-3.1.1?

Loiane said on 05-04-2010

Ei Rogério,

Para a versão nova do ExtJS, ainda não vi nenhum plugin que faça isso (sem passar pelo server).

Se tiver usando Java, pode utilizar um framework que crie um arquivo excel do lado server, como por exemplo Apache POI ou JExcel.

Ou você pode pedir uma ajuda aos desenvolvedores desse plugin apresentado no tutorial. Infelizmente, o time do ExtJS não dá suporte à plugin e compenentes de terceiros, então, é só com os desenvolvedores mesmo.

[]‘s

Featured Posts