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. Christian says:

    I’ve got exporter and downloadify to cooperate, but everytime the store is reloaded the button “duplicates” it self, as in the button gets wider by the width of the download image.

    Anyone know how to fix this?

    thanks in advance
    Christian

  2. Can anyone tell me why my exporter does not work in IE?
    Many thanks,
    Rob

  3. Vinicius says:

    hello,

    I am trying use the Exporter and i receive that error on click in the Exporter.Button:

    Erro: this.handler.call is not a function
    Source-file: ../ext/ext-all.js
    Line: 7

    anyone know about that?

    thaks

  4. Lecnar says:

    Excelent work whit the exporter adn great work with Extjs, i am looking for a version of the exporter that fully works on IE 8 and ExtJs 3.03.

    thanks

  5. Lecnar says:

    hi i am looking for a version of the exporter that fully works on IE 8 and ExtJs 3.03.

    thanks

  6. Kukuh says:

    Hello ed, nice works! brilliant, indeed!

    I have been tried to use this ux with ExtJS 3.3.1

    At first, I encountered error msg in the Firebug like this:
    grid.getColumnModel is not a function
    Exporter-all.js in line 86: columns: grid.getColumnModel().config

    After I eliminate that line of code, all is works!
    But, I am worried that eliminating that line of code could trigger another error / unappropriate behaviour..

    Any idea?

  7. Prabhu Patil says:

    First of all thanks for great plugin. How to export all the data(paginated) to excel?. Now, it’s only exporting current page data.

  8. Tommy says:

    Hi, brilliant stuff!

    I am trying to get this working on an Ext Designer project and was wondering if you could give some hints on how to get an exportbutton xtype. I assume there must be some overriding of sorts.

    Thanks.

  9. Oualid says:

    I have the same problem as Jan S,

    For some reason the link created in the button always reloads my site.

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

    And firebug says: this.getEl is not defined

    Any idea?

  10. clone says:

    i’m using extjs 3.2.1

    i want to using exporter in my datagrid, but it seems error like this

    b[d.xtype || e] is not a constructor

    could anyone help me to solve this problem?

  11. Abhilash says:

    Hello,

    Brilliant code. 🙂

    Just like others, I cannot run the sample in IE8. No specific error is thrown.
    But, I can successfully run the sample in FF (including FF4).

    Any idea why the code behaves wiered in IE8?
    Thanks

  12. Diego Armando Vargas Salazar says:

    hi About Ed Spencer

    I tried your code and it works fine with an ArrayStore, but i need to charge the records from a database, and when i change the ArrayStore for a JSonStore, it doesn´t work, can you help me please ! thanks

  13. Diego Armando Vargas Salazar says:

    I just change the store for this:

    var proxyArea = new Ext.data.HttpProxy({
    url: ‘php/filtroArea.php’,
    method: ‘post’
    });

    var store = new Ext.data.JsonStore({
    url: ‘php/filtroArea.php’,
    proxy: proxyArea,
    fields: [
    {name: ‘idarea’, type: ‘int’},’codigoarea’, ‘nombrearea’,{name: ‘jefearea’, type: ‘int’}],
    });

    store.load();

  14. Diego Armando Vargas Salazar says:

    of course i change the column from de grid like this:

    columns: [
    {header: ‘idarea’, width:170, width:160, dataIndex: ‘idarea’},
    {header: ‘Código Area’, width: 75, dataIndex: ‘codigoarea’},
    {header: ‘Nombre Area’, width: 75, dataIndex: ‘nombrearea’},
    {header: ‘Jefe Area’, width: 75, dataIndex: ‘jefearea’}
    ],

  15. Diego Armando Vargas Salazar says:

    hey Ed Spencer, please answer me, i need you… thanks

  16. Guido says:

    The Data URI just sits there in IE without IE doing anything with it. No prompt to download, nothing opening in excel, no messages of any sort.

    Any ideas?

  17. Pingback: extjstutorial.org

  18. Cheryl says:

    I have a grid with a toolbar with the xtype: ‘exportbutton’ with the same store as the grid uses.

    However, when I do a reconfigure on the grid with new data in the store, the export still shows the old data.

    How do I reconfigure the export also?

  19. partha says:

    any one tried with ext js 4?

  20. Aggie says:

    Has anyone tried with extjs 4? and is there a way to export grid data to PDF?

  21. spacetiller says:

    Hi, Ed,
    It’s an amazing plugin, and I can run the example smoothly.
    Yet there is another problem when i want to use it in my Extjs4 code. maybe it’s because the version confiliction between extjs4 and extjs3. Could you send me some tips about that?

  22. maruccio says:

    will there be a Ext Js 4 Compatible Exporter any time soon, it would really help!

  23. Chan says:

    I need help for EXTjs 4.0 grid to excel converter for Ie7 and ie8 …thanks in Advance

  24. Ed Spencer says:

    @maraccio there is a community-lead effort around porting it at http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel

  25. pickle says:

    i tried exporting the grid with row expander plugin ,but the excel file is not displaying properly and it is not showing the rowbody content ……can u plz help

  26. Jose Venegas says:

    Hi i have a problem with Export pivotGrid

    this is my code:

    var gridDataStore = new Ext.data.Store({
    id: ‘gridDataStore’,
    proxy: new Ext.data.HttpProxy({
    url: ‘datos.php’, // File to connect to
    method: ‘POST’
    }),
    reader: new Ext.data.JsonReader({
    root: ‘results’,
    totalProperty: ‘total’,
    id: ‘RSLCOD’
    },[
    {name: ‘EMPCOD’, type: ‘string’, mapping: ‘EMPCOD’},
    {name: ‘OFICOD’, type: ‘string’, mapping: ‘OFICOD’},
    {name: ‘ARECOD’, type: ‘string’, mapping: ‘ARECOD’},
    {name: ‘CTDCOD’, type: ‘string’, mapping: ‘CTDCOD’},
    {name: ‘MOTIVOCIERRE’, type: ‘string’, mapping: ‘MOTIVOCIERRE’},
    {name: ‘SITUACIONRECLAMO’, type: ‘string’, mapping: ‘SITUACIONRECLAMO’}
    ])
    //,
    //sortInfo:{field: ‘Nombre’, direction: “ASC”}
    })

    gridDataStore.load();

    var pivotGrid = new Ext.grid.PivotGrid({
    tbar : [
    {
    xtype: ‘exportbutton’,
    store: gridDataStore
    }
    ],
    title : ‘REclamos x XXXXXXX’,
    width : 800,
    height : 259,
    renderTo : ‘docbody’,
    store : gridDataStore,
    aggregator: ‘count’,
    measure : ‘value’,

    viewConfig: {
    title: ‘Reclamos por YYYYYYYYY’
    },

    leftAxis: [
    {
    width: 80,
    dataIndex: ‘OFICOD’
    },
    {
    width: 90,
    dataIndex: ‘ARECOD’
    },
    {
    dataIndex: ‘SITUACIONRECLAMO’
    }
    ],

    topAxis: [
    {
    dataIndex: ‘CTDCOD’
    },
    {
    dataIndex: ‘MOTIVOCIERRE’
    }
    ]
    });

  27. topan says:

    hi Ed,,

    Can we save an Excel file with custom name…?
    i have problem if i save it with random name…

    tq.

    regards

    topan.

  28. David Sachdev says:

    I see here that you mention that you are working to get this plug-in ported over to other versions of ExtJS:

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

    First of all, thank you very much for the plug-in. I was going to look into what was necessary to get it working in ExtJS 3.1.1 which is the release that we have in production. Are you planning on testing it on other versions of ExtJS 3.x? Also, do you have a time frame in mind. I am looking into the errors that I am getting, but I’m sure any fix that I may have will not be as good as yours!

    Thanks
    David

  29. rao says:

    I am getting ‘Downloadify’ is undefied error.

    Can some one tell me why

  30. Ed Spencer says:

    @Jose PivotGrid was created after the Exporter and isn’t supported. Feel free to fork the github repo and add the feature though 🙂

  31. sam says:

    Great plugin. Does anyone got it working with EXT JS 2.2? My page just reloads on download link click.

    Here is code im using:

    var exportButton = new Ext.ux.Exporter.Button({
    component: config.colmod,
    text : “Download as .xls”
    });

    and config.colmod = new Ext.grid.ColumnModel([ …..

    what am i going wrong?

  32. Pingback: Ext 3: Export large Grid with pagination to Excel

  33. abhie says:

    how i can rename the file downloaded…
    by default it is “download.xlsx”

  34. abhie says:

    how i can rename the file downloaded…
    by default it is “download.xlsx” i want to rename it to specific name and date such as “Data 2012-05-12”

  35. fvchapa says:

    Hi…i have a problem.
    When grid is dinamic columns not works correctly.
    exporter only grid initial and not change when dinamic grid change.
    any idea?
    thank

  36. Jose Carlos says:

    I need any idea of I can develop a pdf formatter Ext.ux.Exporter to

    export an ext grid to pdf ,

    Thanks,

  37. jose carlos says:

    I like any help to made a formatter ext.ux.exporter any greed to pdf , i use Ext JS 3.4.0 .

  38. Niko Peych says:

    Hi Ed, nice work!

    I need for your help. I want to share to exported Excel file different width of the columns. For now by default all columns have equal width.

    Please, answer me how I can do it…

  39. Joe says:

    Hi, I tried to use this example… im getting the grid view with the download link but when i click on the link, in my openoffice spreadsheet im getting general error, general input/output error… i dont know why…. can any one help me please……

  40. Garry says:

    do you have Ext.ux.Exporter that works in extjs 4.1.1?

  41. Garry says:

    do you have Ext.ux.Exporter – export any Grid to Excel or CSV that works in extjs 4.1.1? thanks

  42. Steve says:

    Has anyone used this with a treepanel rather than a gridpanel?

  43. Flo says:

    do you have Ext.ux.Exporter that works in extjs 4.1.1 in MVC config ?
    do you have an example ?

  44. AGD says:

    I want to give image icon as first row in excel file
    how to do it?

  45. Otmane Ben Ammar says:

    hi ed , thank you for the plugin, i would like to use it on sencha architect project if you can help me to do this and im using extjs 4.2.2 on sencha 3.04 thank you

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: