ExtJS: How to Export DataGrid to Excel

February 8, 2010 | By

extjs export gridpanel excel ExtJS: How to Export DataGrid to Excel

This tutorial will walk through how to export data from ExtJS DataGrid directly to Excel.

Sometimes the user wants to export the data from the datagrid to an excel file. There is an ExtJS third party plugin that does it for you.

There are some “issues” you have to be aware of before you start:

  • It needs a browser that supports data URLs, such as Firefox, Opera and IE8.
  • I tested it with the following ExtJS versions: 2.2.1, 3.0, 3.0.3 and 3.1, but it only worked with ExtJS 3.0. If anyone is using other ExtJS version and the plugin worked, please, let me know.
  • It only works on the data in the Store – if you are using server-side paging, then perform this processing on the server. For quick and dirty conversion of a small table to Excel, this might be useful.
  • If the data in the Store is volatile (It gets reloaded or edited), the data URL will have to be recalculated.

Let’s get started:

First, create a file in your projet and paste this content in it (I called it exporter.js): http://github.com/loiane/extjs-export-excel/blob/master/WebContent/js/exporter.js (this file has too many lines, that’s why I’m not going to past its content here).

Then, in your datagrid, add this code:

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());

And if you try to export the data, it will look like this:

extjs export gridpanel excel file ExtJS: How to Export DataGrid to Excel

Feel free to change the color, fonts. Take a look in the code and try to understand it to make the changes you want.

Ed Spencer also developed a similar plugin. The source code is cleaner than this one. The output is the same, though.

You can download my sample app from my GitHub repository (JEE project): http://github.com/loiane/extjs-export-excel

Happy coding!

Filed in: ExtJS | Tags: ,

Comments (47)

  1. SM

    Nice post. Thanks

  2. azad

    Good!
    but how can we do with IE6?
    is there any solution?

  3. Alejandro

    The solution to generate excel grid it’s to generate on server side and make a response of the data to the client side…other wise you be stuck on IE version ….

    Good Luck!

  4. db

    Great post, thanks for the compact code base.
    Any idea how to control output filename or extension? XL is complaining about file type not being correct, perhaps it should be xlsx – but I don’t see how to control that.
    Thanks,
    DB.

  5. Neil

    Hi, I’m not aware wether you had tested this in IE8。 I came across a problem whose descrition was that “The data area transferred to system and to be called is too small”. I didn’t know why this problem existed when I tested in IE8.

    Notice: This third party plugin can function well in IE6, IE7,FireFox。

    I’ll appreciate it that you’ll you reply to me.

    Thanks!

  6. Neil

    Hi , I’m not aware how to contro l the output file name.
    I had tried many approches to do it, but not successfullt in the end.
    Could you please tell me how to control the output file name.
    What you will do will be appreciated by not me, but also Db.
    Thanks!

  7. Safal

    Hi, I’ve integrated the code in my apps and able to get the excel file with firefox and office 2003 install. right now there is no data in my grid so its empty excel file. But when I tested it on another machine with firefox and office 2007 then I’m getting problem here. The popup comes but the file corrupted. Anybody please help me what things need to do to work it on office 2007 or it is because of data problem ?

  8. Safal

    @hi Loiane
    Its working for office 2007 now. The problem i’m facing now is Export is not working on IE but its working on FF. The error i’m getting is “The data area transferred to system and to be called is too small”. Please can you help me in this.

  9. Safal

    @hi Loiane. Thanks for your reply. Now it works on 2007 too.
    The problem I’m facing now is its not working on IE. The error is “The data area transferred to system and to be called is too small”. Please can you help me what else need to do so that it will also work on IE. I think “document.location” is giving problem on IE.

  10. jaspreet

    Loiane
    Please tell me is it possible to populate excel sheet in tabpanel in extjs

  11. Victor

    Hello, unfortunatelly this example doesn’t work on Office 2010.

  12. Diego Armando Vargas Salazar

    hi, i use it how it comes and it works fine, but when i change the simpleStore for a JSonStore with an url, it shows fine at the grid, but the excel just show the colums name, but there are no any recor !! can you helpme please ! thanks

  13. Diego Armando Vargas Salazar

    Hi, i was trying to implement it, when i tried the example it works perfect, but when a change the SimpleStore for a JSonStore, it shows the grid with the information form my database, but when i use the link to download the excel, the excel just shows the column names, but not my data; seems to be a problem with the JSonStore charge time… can you help me please !! thanks

  14. Safal

    Hi Loiane,
    I’m using Extjs ediatble grid in my application. Data is populating from database correctly but some time I’m getting the error that “this.store is null”. I’m displaying the data depends on customers. Could you please tell me why such happens for some time only. is it cache problem or data problem ?

  15. Chitinuta

    Hi
    I am trying to run your example but I am receiving “linkButton.getEl() is undefined” error. Do you have any idea why? The only change I made to the exporter is instead of a GridPanel I override EditorGridPanel. Thanks

    Cristina

  16. kprk

    Hi There, I am trying to use your plugin for exporting grid data. I have copied the exporter.js file in my plugin folder and specified the path my my html file. And I have created grid js file and added LinkButton code, but it shows error as Uncaught TypeError: undefined is not a function. I have coped LinkButton.js file in my plugin folder also can ypu help me in this regard ?

  17. kprk

    Hi Loiane,
      My Link button problem has solved. I am getting there Uncaught TypeError: Cannot call method ‘child’ of undefined for code which we add the code

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

    Could you please let me know what is main reason for this ?

    • Loiane

      Hi kprk,
      What is the Ext JS version you are using?
      This plugin is not compatible with all versions, ony the one I’m using in this post.

  18. Jonathan

    This has been really useful, thanks.
    I’m now trying to migrate to Extjs 4.0 where “this.getColumnModel()” in a gridpanel won’t work. I’ve trawled all the forums and am at a loss of how to get a handle on the columns of grid in Extjs 4.+ – if anyone has any ideas then please post, thank you.

  19. uic

    am getting the error Ext.LinkButton is not a constructor

  20. kprk

    I am using ext4.0.2a

  21. kent

    Hi Loiane, i facing the same problem with Chitinuta.
    I already declare the link button before the grid  still the same,
    I try debug and it cant get function getEl() any idea for it?

  22. Hi Loiane, i facing the same problem with Chitinuta.
    I already declare the link button before the grid  still the same,
    I m using version 3 now.
    I try debug and it cant get function getEl() any idea for it?

  23. Loiane

    This plugin does not support ExJS 4.
    I`’m working to port it to ExtJS 4.

  24. Nicola

    Hi Loiane,

    Why does the extjs grid exporter export the hidden columns also? Is there any way to disable that?
    Thank you for your answer

  25. svs

    Hi Loiane
    Everything is working fine but how to rename the excel sheet generated ..

  26. Sabareesh

    Hi Loiane
    Everything works fine but the excel created is stored in some random combination of number and character , how to make it store in a desired name .

    Thanks in advance.

  27. Sabareesh

    can you please tell which part of the code to change, i tried it but couldn’t figure out also the extension of the excel being created is .part.xls

  28. Nicola

    Hi Nicola,
    You can add a condition to the plugin code to not export the hidden columns.
    Thanks!

    Sorry but I can find where I must add :(

  29. This plugin does not support ExJS 4.I`’m working to port it to ExtJS 4.

  30. David Sachdev

    I commented at the plug-in page, but then realized that daydeal may not be the original author. I was wondering what your timeframe for the port is, and if you expect it to work on other versions of ExtJS 3.x

    Thanks
    David

    • Loiane

      Hi David,
      I’m not planing to ported it for now, there is another plugins I need to port first.
      Check at the sencha forum if anyone has already ported it.
      Thanks!

  31. Thanks for posting this solution. I’ve used it an application I’m working on to reduce the amount of work the server is doing.
    Silas

  32. Altansukh

    good post thanks.