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:

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!

47 thoughts on “ExtJS: How to Export DataGrid to Excel

  1. 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!

  2. 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.

  3. 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!

  4. 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!

  5. 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 ?

  6. @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.

  7. @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.

  8. 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

  9. 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

  10. 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 ?

  11. Pingback: extjstutorial.org
  12. 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

  13. 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 ?

  14. 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 ?

    1. 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.

  15. 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.

  16. 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?

  17. 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?

  18. 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

  19. 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.

  20. 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

  21. 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 :(

  22. 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

    1. 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!

  23. 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

  24. Pingback: JavaPins

Comments are closed.