Ext.ux.Exporter – export any Grid to Excel or CSV
November 24, 2009 by Ed Spencer · 36 Comments
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.
Related posts
Software Architect at Sencha Inc where I lead the development of Ext JS and supporting projects. A longtime lover of JavaScript and related geekery, currently living in Palo Alto.
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.
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
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
another question. Is it possible to change the colors in Excel. I tried it with the Workbook.js file, but it doesn’t work.
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”
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
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.
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,
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?
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
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
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).
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.
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
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
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…
I wonder if this plugin works with version 3.1.1 ext-because I am not able to use it.
This plugin works with version 3.1.1 of EXT?
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
u need modify the template first
FYI I updated the main repo with Pradeep’s patches – thanks Pradeep
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
}]
@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;
}
});
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’
});
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
Brilliant ! just what I was looking for.
Thanks Ed!
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.
just want to say thanks u so much, keep up the good work…
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.
Link to the Downloadify snippet I was just referring to: http://pastebin.com/UqtQ71KR
@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.
i’m having same problem as Erique and I can’t manage to make your example on pastebin work…
Can any of you please post an example of code that makes use of Downloadify to export an Ext grid…
I cant export de grid, please post an example of code of downloadify with ext
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
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