We will learn here how how to export data to excel using JQuery , In this article you can export Gridview data or html table data into excel.

Let's start now

Step 1: Design basic HTML table as in the following snippet to make sure that table should be present under DIV element and provide an ID to that DIV element.

  1. <div id="content" style="width: 1200px; margin: 30px auto;">
  2. <table style="width:100%">
  3. <tr>
  4. <td>Jill</td>
  5. <td>Smith</td>
  6. <td>50</td>
  7. </tr>
  8. <tr>
  9. <td>Eve</td>
  10. <td>Jackson</td>
  11. <td>94</td>
  12. </tr>
  13. </table>
  14. </div>
  15. <input type="button" id="btn_excel" value="exportexcel"/>
Step 2 : Here comes the code to export the data into excel (jQuery).
  1. $("#btn_excel").click(function(e) {
  2. window.open('data:application/vnd.ms- excel,' + encodeURIComponent($('#content').html())); // content is the id of the DIV element
  3. e.preventDefault();
  4. });
That's it with a single line of code we can export the data to excel.

I hope this helps u.
Happy coding!