Ext.ux.Exporter – export any Grid to Excel or CSV
November 24, 2009 by Ed Spencer · 15 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
Geek
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