javascript 将 html5 表导出到 excel jquery

export html5 table to excel jquery

提问by Kumar

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

我想使用 js 或 jquery 将我的 html 表导出到 excel 表我已经搜索过谷歌但没有得到任何有用的资源。这是我的 html 表格代码

<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.........

请帮我找出任何解决方案.........

回答by Jonathan Chaplin

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.

我发现了以下内容，它适用于 Chrome(63)、Firefox(57) 和 IE11。简而言之，您可以通过切片和连接表行来创建 csv。接下来创建一个“text/csv”类型的 Blob，最后使用锚点“a”标签的下载属性下载它，这样页面就不会导航到该文件。

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

回答by Javier Otero V

Here's the solution (link)

这是解决方案（链接）

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