export html5 table to excel jquery

Question

i want to export my html table to excel sheet using js or jquery i have searched google but didnt get any useful resources. here is my html table code

<table>
        <thead id='headers'>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Mobile</th>
                <th>Mail ID</th>
                <th>Rating</th>
                <th>Date</th>
                <th>Notify</th>
                                <th>View</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                                <td><input type="checkbox"/></td>
                <td>Praveen</td>
                <td>97910123123</td>
                <td>praveen@360i</td>
                <td>5 star</td>
                <td>15.2.2013</td>
                <td>A</td>
                                <td>4</td>
            </tr>
                        <tr>
                                <td><input type="checkbox"/></td>
                <td>kumar</td>
                <td>97912342333</td>
                <td>kumar@360i</td>
                <td>4 star</td>
                <td>16.2.2013</td>
                <td>D</td>
                                <td>3</td>
            </tr>
        </tbody>
    </table>

please help me to find out any solution.........

Are you sure where is no useful results? http://stackoverflow.com/questions/6566831/how-to-export-html-table-to-excel-using-javascript — Morpheus
– Morpheus, Commented Feb 15, 2013 at 12:02
non ie solution here.. stackoverflow.com/questions/6955627/… — codeandcloud
– codeandcloud, Commented Feb 15, 2013 at 12:04
by using <thead>(coloumn name) and <tbody>(rows) tag content to excel — Kumar
– Kumar, Commented Feb 15, 2013 at 12:08

Jonathan Chaplin · Accepted Answer · 2018-01-25 21:39:40Z

I found the following, and it works in Chrome(63), Firefox(57), and IE11. In short, you create a csv from slicing and joining the table rows. Next you create a Blob of type "text/csv" and finally you download it using the download attribute of the anchor "a" tag so that the page doesn't navigate to the file.

var xport = {
  _fallbacktoCSV: true,  
  toXLS: function(tableId, filename) {   
    this._filename = (typeof filename == 'undefined') ? tableId : filename;

    //var ieVersion = this._getMsieVersion();
    //Fallback to CSV for IE & Edge
    if ((this._getMsieVersion() || this._isFirefox()) && this._fallbacktoCSV) {
      return this.toCSV(tableId);
    } else if (this._getMsieVersion() || this._isFirefox()) {
      alert("Not supported browser");
    }

    //Other Browser can download xls
    var htmltable = document.getElementById(tableId);
    var html = htmltable.outerHTML;

    this._downloadAnchor("data:application/vnd.ms-excel" + encodeURIComponent(html), 'xls'); 
  },
  toCSV: function(tableId, filename) {
    this._filename = (typeof filename === 'undefined') ? tableId : filename;
    // Generate our CSV string from out HTML Table
    var csv = this._tableToCSV(document.getElementById(tableId));
    // Create a CSV Blob
    var blob = new Blob([csv], { type: "text/csv" });

    // Determine which approach to take for the download
    if (navigator.msSaveOrOpenBlob) {
      // Works for Internet Explorer and Microsoft Edge
      navigator.msSaveOrOpenBlob(blob, this._filename + ".csv");
    } else {      
      this._downloadAnchor(URL.createObjectURL(blob), 'csv');      
    }
  },
  _getMsieVersion: function() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf("MSIE ");
    if (msie > 0) {
      // IE 10 or older => return version number
      return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
    }

    var trident = ua.indexOf("Trident/");
    if (trident > 0) {
      // IE 11 => return version number
      var rv = ua.indexOf("rv:");
      return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
    }

    var edge = ua.indexOf("Edge/");
    if (edge > 0) {
      // Edge (IE 12+) => return version number
      return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
    }

    // other browser
    return false;
  },
  _isFirefox: function(){
    if (navigator.userAgent.indexOf("Firefox") > 0) {
      return 1;
    }

    return 0;
  },
  _downloadAnchor: function(content, ext) {
      var anchor = document.createElement("a");
      anchor.style = "display:none !important";
      anchor.id = "downloadanchor";
      document.body.appendChild(anchor);

      // If the [download] attribute is supported, try to use it

      if ("download" in anchor) {
        anchor.download = this._filename + "." + ext;
      }
      anchor.href = content;
      anchor.click();
      anchor.remove();
  },
  _tableToCSV: function(table) {
    // We'll be co-opting `slice` to create arrays
    var slice = Array.prototype.slice;

    return slice
      .call(table.rows)
      .map(function(row) {
        return slice
          .call(row.cells)
          .map(function(cell) {
            return '"t"'.replace("t", cell.textContent);
          })
          .join(",");
      })
      .join("\r\n");
  }
};

Nunser · Accepted Answer · 2013-05-16 21:46:11Z

0

Here's the solution (link)

$("#btnExport").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
    e.preventDefault();
});

edited May 16, 2013 at 21:46

Nunser

4,5228 gold badges27 silver badges37 bronze badges

answered May 16, 2013 at 21:25

Javier Otero V

1

Collectives™ on Stack Overflow

export html5 table to excel jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related