CODEWITHSUNDEEP
jqueryhtmlexcel
Vishaal Kathiriya
Vishaal Kathiriya

Reputation: 21

Can not export html table to excel using jQuery

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.

Upvotes: 0

Views: 13201

Answers (4)

Leyon Gudinho
Leyon Gudinho

Reputation: 91

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

Upvotes: 0

Nash
Nash

Reputation: 2590

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

Upvotes: 0

Alex Filipovici
Alex Filipovici

Reputation: 32571

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.

Upvotes: 0

Anil Kumar
Anil Kumar

Reputation: 103

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.

Upvotes: 1

Related Questions