I have around 5000 rows(tr) inside HTML table each having 10 columns(td). Now I am trying to export this whole HTML table to excel using following jQuery code:
var test = $('#data');
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(test.html()));
Have also tried with many other jQuery plugins like DataTables.net, jqWidgets and jqGrid but each time my browser gets crashed and have to reload the page again.
window.open() has its scope and limitations that has been well explained in this post: Export to CSV using jQuery and html
For your concern, I tested with 2500 rows and it works fine. (I can't upload so much data on jsfiddler but I am sure it will work for 5000 rows also.)
Also, I suspect if you are wrapping your html table into a container DIV. Just put your html table into a DIV and use like this -
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault(); });
http://jsfiddle.net/AnilAwadh/wJyWm/
encodeURIComponent() is a Javascript function that is used to encode special characters if you data has any and its use is optional.
If you are targeting non-IE browsers, try the following:
var test = $('#data');
window.open('data:application/vnd.ms-excel,' +
encodeURIComponent(test[0].outerHTML));
See it working here by using Chrome: http://jsfiddle.net/56tvb/2/.
If you are targeting Internet Explorer as a browser, you have to look for a different approach, as the current one will not work. From the MSDN library, the data Protocol topic says:
Data URIs are supported only for the following elements and/or attributes.
object (images only) img input type=image link CSS declarations that accept a URL, such as background, backgroundImage, and so on.Data URIs can be nested.
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
My friend suggested this approach - try creating a blob and use navigator.msSaveBlob() or navigator. msSaveOrOpenBlob() .
var csvContent=data;
var blob = new Blob([csvContent],{
type: "text/csv;charset=utf-8;",
});
navigator.msSaveBlob(blob, "filename.csv")
//or navigator. msSaveOrOpenBlob(blob, "filename.csv")
You can try this plugin - tableExport.js
HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.table2excel.js"></script>
<body>
<tr class="noExl">
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</body>
jQuery:
$("button").click(function(){
$("#table2excel").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Excel Document Name"
});
});
Plugin download: http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
