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.

Try sending the data first to your application server and then set headers from your server. — Ravi Soni, Jul 13 '13 at 05:13
Can't make use of application server as I have to implement things using client side only. — Vishaal Kathiriya, Jul 13 '13 at 05:17
Sorry to say but even jsFiddle also giving me same error when I tried to post HTMl data and jQuery code over there. — Vishaal Kathiriya, Jul 13 '13 at 05:34
Perhaps this link clear you in all aspects : http://stackoverflow.com/questions/4325968/window-open-with-headers — Ravi Soni, Jul 13 '13 at 05:42

score 1 · Answer 1 · edited May 23 '17 at 11:59

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.

score 0 · Answer 2 · answered Jul 19 '13 at 14:38

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.

score 0 · Answer 3 · answered Nov 27 '13 at 17:02

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")

msdn.microsoft.com/en-us/library/ie/hh772331(v=vs.85).aspx

score 0 · Answer 4 · answered Nov 23 '15 at 08:48

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

Can not export html table to excel using jQuery

4 Answers4

Linked