Post
Ask Question

Export to Excel using jQuery

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!