ExtJS: Exportar de GRID para Excel
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
Filed Under: Ext JS 3
[...] 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 [...]
Boa tarde Loiane, sabe como posso exportar minha grid utilizando o ext-3.1.1?
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
Oi Loiane,
Você sabe se é possível exportar a grid para um PDF?
@Lucas
Olá Lucas, só usando código no lado sevidor pra exportar pra pdf. Ainda não vi nenhum plugin em ext que faça isso, nem sei se tem algum suporte em js.
ExtJS: Exportar de GRID para Excel…
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…
Não estou conseguindo usar a sua dica. Estou fazendo td direitinho mas não carrega, será que é pelo fato de que estou usando IE9. Mesmo no firefox não funciona nada.
Olá Jorenilson,
Está tentando executar o mesmo código que está disponível para download?
Lembrando que esse plugin não funciona no Ext JS 4, é necessário outra versão.
i am new for extjs. Is it possible to integrate your plugin in extjs-4.0.2a. I try not work. tell your suggestion.
Hi arunkumar,
This plugin does not work with Ext JS 4
Oi Boa Tarde!!
Parabens pelo post, muito util e bem escrito!
Loiane, estou com um problema, ao abrir o excel apresenta erro de arquivo corrompido, sera q poderia me dar uma dica?
Obrigada!
Olá Viviane, qual versão do ExtJS vc está usando? e qual versão do excel vc está usando para abrir o arquivo?
[]‘s