Ext.ux.Exporter – export any Grid to Excel or CSV

Sometimes we want to print things, like grids or trees. The Ext JS printing plugin is pretty good for that. But what if we want to export them instead? Enter Ext.ux.Exporter.

Ext.ux.Exporter allows any store-based component (such as grids) to be exported, locally, to Excel or any other format. It does not require any server side programming – the export document is generated on the fly, entirely in JavaScript.

The extension serves as a base for exporting any kind of data, but comes bundled with a .xls export formatter suitable for exporting any Grid straight to Excel. Here’s how to do that:

var grid = new Ext.grid.GridPanel({
  store: someStore,
  tbar : [
    {
      xtype: 'exportbutton',
      store: someStore
    }
  ],
  //your normal grid config goes here
});

Clicking the Download button in the top toolbar iterates over the data in the store and creates an Excel file locally, before Base64 encoding it and redirecting the browser via a data url. If you have Excel or a similar program installed your browser should ask you to save the file or open it with Excel.

I put together a quick example of the plugin in action inside the repository, just clone or download the code and drag the examples/index.html file into your browser to run it.

The Exporter will work with any store or store-based component. It also allows export to any format – for example CSV or PDF. Although the Excel Formatter is probably the most useful, implementing a CSV or other Formatter should be trivial – check out the Excel Formatter example in the ExcelFormatter directory.

95 Responses to Ext.ux.Exporter – export any Grid to Excel or CSV

  1. Steffen says:

    Genius!

    I’ve played around with that “data:” and Base64 solution for a CSV export once, too, but somehow didn’t get it to work.
    You obviously did, and that even in an elegant way. 🙂

  2. Megmefleg says:

    Awesome!

    This is a very useful export function.

    I try to use it with a filtered grid and unfortunately I always export the whole store of my grid.
    Is it possible to export only the visible columns or/and only the filtered data?

    Thanks

  3. Hello,

    On my laptop, the function is working very well with Firefox, but with Internet Explorer 8 the export is not working. Also no errormessage?

    Do you know about this problem? Do you have a solution?

    Kind regards,
    Job

  4. another question. Is it possible to change the colors in Excel. I tried it with the Workbook.js file, but it doesn’t work.

  5. Robert Kuehn says:

    Hi,
    Great plugin!!! But… Not working with Ext JS 3.0.3 😦

    Hi Job van de Velde,

    i think this is the problem with IE8
    http://en.wikipedia.org/wiki/Data_URI_scheme

    “Internet Explorer 8 limits data URIs to a maximum length of 32 KB”

  6. Chris says:

    This is great Ed, and looks really clean. Can you verify the version of ExtJs required please as I could not get the example to work in 3.0 in IE8. It works ok in FF 3.5.7.

    Has anyone got this to work in IE8?

    Thanks
    Chris

  7. Ed Spencer says:

    I think IE has problems with data urls longer than 32kb, which means that larger xls files won’t work correctly. This seems entirely arbitrary, and is not a problem shared by other modern browsers.

    I actually wrote this for a company solely using Firefox (lucky me), so fortunately this was not an issue for us. It seems that if you have to support IE8 and can’t guarantee that files will be smaller than 32kb then you can’t use this approach.

  8. Americos says:

    Hi Ed,

    Very nice plugin!

    Quick Question, I notice that on FF 3.5 when you download the file it gets download as: xxxxx.xls.part1, so everytime I need to remove the .part1 extension. Is there a way around this? Moreover, can I set a name to the resulting .xls file?

    BTW: In Safari 4.0.3 it gets download as: Unkown, on Chrome for Mac it only opens a the new window without asking/saving the file

    Thanks,

  9. Paul says:

    Hi Ed, this looks like a nice plugin, unfortunately I am getting the following error in FF using Ext 3.1

    this.btnEl is undefined
    this.btnEl.setStyle(‘backgro…age’, icon ? ‘url(‘ + icon + ‘)’ : ”);n

    Any ideas?

  10. Luc Saffre says:

    I have the same problem as Paul (January 27, 2010 at 5:01 am).
    Tried with both ExtJS 3.0 and 3.1, also with IE who says

    Message: ‘this.btnEl’ is null or not an object
    Line: 26987
    Char: 13
    Code: 0
    URI: http://127.0.0.1:8000/extjs/ext-all-debug.js

  11. Borislav Borisov says:

    Hi I try to use Exporter in this way :

    {

    xtype: ‘grid’,
    title:’CHANGELISTS COMPONENTS ‘,
    border: true,
    stripeRows: true,
    autoExpandColumn: ‘program’,
    store : changelistStore ,
    buttons: [ new Ext.ux.Exporter.Button({
    component: ‘grid’,
    / text : “Download as .xls”
    })],
    columns: [

    {id:’program’,header: “PROJECT”, width: 150, sortable: true,renderer: blue, dataIndex: ‘program’},

    {id:’program’,header: “PROGRAM”, width: 150, sortable: true,renderer: blue, dataIndex: ‘program’},
    {id:’project’,header: “PROJECT”, width: 150, sortable: true,renderer: blue, dataIndex: ‘project’},

    {header: “Changelist”, width: 120, sortable: true,renderer: change, dataIndex: ‘cl’},
    {header: “Number Of Files”, width: 80, sortable: true,renderer: change, dataIndex: ‘num’},
    {header: “Reason”, width: 80, sortable: true,renderer: change, dataIndex: ‘reason’},
    {header: “Changed By”, width: 120, sortable: true,renderer: change, dataIndex: ‘by’} ,
    {header: “Perforce”, width: 100, sortable: true,renderer: change, dataIndex: ‘perforce’} ],

    height:200,
    width:730

    }

    the whole grid is rendering just fine and download button appears in the corner ,but when i click on download button it just reloads all the date once again and export nothing , Can you help me please ,where is my mistake

  12. Franz says:

    Excellent approach, just doesn’t work in IE. But tadaaaaa, here is a (possible) solution: why don’t you bundle your Exporter with Downloadify (http://downloadify.info/) ?

    Downloadify is a client-side file generation component written in Actionscript/Flash. You feed it with a string (base64 supported) and it creates a real, downloadable file out of it. It also overcomes IE 8’s 32kb data uri limit and even makes your exporter compatible with IE7 (doesn’t support data uris at all).

  13. Americos says:

    Good Idea Franz.

    I’ve just try it and Downloadify works pretty well with Ed’s extension. This overcomes the problem with IE7 and IE8.

    So If you need to have Ed’s extension working in IE7 and IE8, downloadify its a must.

  14. I have fixed the issue => ‘this.btnEl’ is null or not an object

    You can have the fixes at
    http://github.com/pradeepgatram/Ext.ux.Exporter

  15. canxss says:

    Hi,

    For those who have successfully used Downloadify with Ext.ux.Exporter, can you give us an example? I tried to use Downloadify by giving it the element of an Ext.Button. But it didn’t work and also the UI got messed up.

    Thanks in advance

  16. Jazz says:

    Hey Spencer,

    I want have a Servlet which does the download for me and what that to work on click of a button. Is that possible…

  17. Rogerio Maia says:

    I wonder if this plugin works with version 3.1.1 ext-because I am not able to use it.

  18. Rogério Maia says:

    This plugin works with version 3.1.1 of EXT?

  19. snake says:

    hi canxss

    i found a way to intergrate Ext.ux.Exporter.Button with downloadify by modify Ext.ux.Exporter.Button ‘s onRender method, create Downloadify on the btnEl

  20. snake says:

    u need modify the template first

  21. Ed Spencer says:

    FYI I updated the main repo with Pradeep’s patches – thanks Pradeep

  22. surendra says:

    Hi Ed,
    when I used this with a store, I got following error. I downloaded code from Pradeep’s site above.

    grid.getColumnModel is not a function
    [Break on this error] columns: grid.getColumnModel().config Exporter-all.js (line 86)

    my code was:
    tbar : [{
    xtype: ‘exportbutton’,
    store: ds1
    }]

  23. Ed Spencer says:

    @surendra which version of Ext JS are you using? If it’s an old version then the getColumnModel function may not exist on the grid. You could probably use the following override to get it working:

    Ext.override(Ext.grid.GridPanel, {
    getColumnModel: function() {
    return this.colModel;
    }
    });

  24. surendra says:

    I’m using 3.2.0, the latest.
    I found that the following code is causing it.
    Here the exportFunction is exportGrid, and so even if I use store, it still goes to exportGrid.
    If I put exportFunction: ‘exportStore’ it works fine.

    I’m new to Ext. Just working on it to see what’s needed to make it work for both: store or grid. It must be easy one.

    Ext.applyIf(config, {
    exportFunction: ‘exportGrid’,
    disabled : true,
    text : ‘Download as Xls’,
    cls : ‘download’
    });

  25. Jose says:

    Hi Ed,
    I just tried the example and it completely crashes Firefox 3.6.3 on my mac. I am using Ext 3.2.1. Also, as reported above, in Safary it saves Unknown as the file.
    Please let us know if there are any updates.
    Thanks

  26. Eddie says:

    Brilliant ! just what I was looking for.

    Thanks Ed!

  27. surendra says:

    How to export only the columns shown on the grid?
    I mean, sometimes, we can remove columns from the grid, sort, reorder etc.
    So how to export only that’s is shown on the grid?

    right now, it just export all columns in the store in the order it’s mentioned in the store.

  28. june says:

    just want to say thanks u so much, keep up the good work…

  29. thadk says:

    To save people time on setting up Downloadify for the CSV Exporter, I ended up with something like this in my var SetLink = function {} (which is set as the button’s onRender function) of Exporter-all.js. exportButton is a simple outside of the ExtJS grid (I did not need it inside) that Downloadify should place the flash created button inside.

  30. thadk says:

    Link to the Downloadify snippet I was just referring to: http://pastebin.com/UqtQ71KR

  31. Erique says:

    @thadk Could you please post an example of code that makes use of Downloadify to export an Ext grid… I am finding it difficult to export the grid to excel in Chrome and IE. I have tried to use the code you provided on the btEl’s on render function and also on the button itself and it keeps throwing errors. An example would really help. Thanks.

  32. geco says:

    i’m having same problem as Erique and I can’t manage to make your example on pastebin work…

  33. navik says:

    Can any of you please post an example of code that makes use of Downloadify to export an Ext grid…

  34. pau says:

    I cant export de grid, please post an example of code of downloadify with ext

  35. IE8 has some bugs too although it is more stable than IE7 and IE6:,-

  36. Erique says:

    Hey everyone,

    I finally found a way to make downloadify with ext to work on my application. It took a lot of trial and error but it works even on Chrome which had an issue before.

    I hope this helps

    http://pastebin.com/N753UXEN

  37. Juan Ramón says:

    Hello, I found very interesting ext.ux.exporter, but I’ve only found one example with the xls extension. I wonder how I can do to export to csv or pdf format. thanks

  38. Christian says:

    I’ve been using an older version of your Exporter and it’s been working great in Firefox: thanks for making such a useful plugin. In the quest to make it work with Chrome however, I tried a newer version, downloaded here, yesterday:

    http://github.com/edspencer/Ext.ux.Exporter/raw/master/Exporter-all.js

    Unfortunately, while using the same client code, this newer version now produces an error:

    grid.getColumnModel is not a function, at line 87 of Exporter-all.js

    So I have two questions: (1) what about this error, is there something that I ought to change in my client code and (2) do you have any idea why the exporter doesn’t work with Chrome (although it supposedly handles data URIs pretty well, or so I read).

    Thanks!

  39. Jan S says:

    Hi,

    Thanks for this extension, but I’m having a little problem.

    For some reason the link created in the button always reloads my site. Anybody know why this appends.

    this.getEl().child(‘a’, true).href = “javascript:void(0)”; //’data:application/vnd.ms-excel;base64,’ + Ext.ux.Exporter[config.exportFunction](this.component, null, config);

    Does anybody know a quick fix for this.

  40. Ala says:

    Hi ,
    can I override the x-tools tools-save to export to Excel

  41. Ala says:

    var tools_kpi = [{
    id: ‘save’,
    handler: function(event, toolEl, panel){

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

    }
    }]

  42. Bob says:

    I have implemented the above in my code. it works perfectly in Firefox. But no luck in IE7.

    Any inputs? What changes would be required for it to work on IE7?

  43. Priyank Gajera says:

    If you are getting error on .. columns: grid.colModel().config

    just change it to columns: grid.store.fields.items.config It will work fine.

  44. Toby says:

    how to export to csv? and how to import csv to grid ?
    thankyou.

  45. Geziefer says:

    Hi Ed,

    hopefully you’re reading the comments to your post here, since several requests concerning CSV export seem to be unanswered.
    Could you be so nice as to provide some code how to do an export to CSV? You say “it should be trivial”, so doesn’t sound as much work for you, still it is for me, since I’m totally new to extjs.

    Thank you in advance,
    Geziefer

  46. Hi,
    Got it to work OK, thanks! But not in IE(6). I have seen an extjs ‘Download as .xls’ link working in windows, so I know it can be done. Any thoughts how?
    Cheers,
    Rob

  47. Sam says:

    Hello All,

    how to import csv file to a grid. Please suggest me how i can go ahead.

    Thanks,
    Sam

  48. Colin M says:

    Hi, great post … i followed the instruction this morning … and no crash …
    only problem: nothing appears !!! …
    i went to the debugger … and it seems that everything is working ok … i just can’t catch where an excel grid is supposed to popup …
    maybe it is because i am using linux? (ubuntu)
    but usually my browser is proposing me to open excel files with open office or to save them …
    so would it be possible to add a function to save it directly to a file? or to point where the code should be added to have this functionnality?

    thank you ..
    colin

  49. Colin Molter says:

    Hi,
    thx for the nice plugin.
    when i call the method: Ext.ux.Exporter.exportGrid(grid),
    i can see that it creates me a huge formatted string … i guess in the excel format .. just one question: how to display it on screen (nothing appear with my code) or how to save it on xls format on the disk?

    thx
    colin

  50. Simon says:

    Has anyone gotten this to work on a mac?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: