Can not export html table to excel using jQuery
Question
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.
4 answers
solution1
1 2013-07-18 16:25:31
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.
solution2
0 2013-07-19 14:38:19
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.
solution3
0 2013-11-27 17:02:26
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")
solution4
0 2015-11-23 08:48:59
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.