Javascript Export Html Table To CSV/XLS

Do you want to add quick table export feature into CSV, XLS format if yes then in this post I am going to share simple javascript script to export html table to excel. This is useful for adding quick excel export feature.

Javascript Export Html Table To Excel

HTML

> ="center">> ="left">> ="2" align="center">> ="3" align="center">> ="top">> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >
>
 
 Test1: <button id="btnExport" onclick="javascript:xport.toXLS('testTable');"> Export to XLS> >&nbsp;&nbsp;&nbsp;Export the table to XLS with CSV fallback for IE & Edge>
 
 
Test 2: <button id="btnExport" onclick="javascript:xport.toCSV('testTable');"> Export to CSV> >&nbsp;&nbsp;&nbsp;Export the table to CSV for all browsers>
 
 
 Test3: <button id="btnExport" onclick="javascript:xport.toXLS('testTable', 'outputdata');"> Export to XLS> >&nbsp;&nbsp;&nbsp;Export the table to XLS with custom filename>
 

>   <table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2" class="table table-striped">
>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
>Code-Page
>ID
>Name>ACP>OEMCP>Windows
>NT 3.1
>Windows
>NT 3.51
>Windows
>95
>1200="background-color: #00f; color: #fff">Windows 3.11>>>X>X>*
>1250="font-weight: bold">Windows 3.1 Eastern European>X>>X>X>X
>1251>Windows 3.1 Cyrillic>X>>X>X>X
>1252>Windows 3.1 US (ANSI)>X>>X>X>X
>1253>Windows 3.1 Greek>X>>X>X>X
>1254>Windows 3.1 Turkish>X>>X>X>X
>1255>Hebrew>X>>>>X
>1256>Arabic>X>>>>X
>1257>Baltic>X>>>>X
>1361>Korean (Johab)>X>>>**>X
>437>MS-DOS United States>>X>X>X>X
>708>Arabic (ASMO 708)>>X>>>X
>709>Arabic (ASMO 449+, BCON V4)>>X>>>X
>710>Arabic (Transparent Arabic)>>X>>>X
>720>Arabic (Transparent ASMO)>>X>>>X

>
Test1:    Export the table to XLS with CSV fallback for IE & Edge
Test 2:    Export the table to CSV for all browsers
Test3:    Export the table to XLS with custom filename

CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Code-Page
ID
Name ACP OEMCP Windows
NT 3.1
Windows
NT 3.51
Windows
95
1200 Windows 3.11 X X *
1250 Windows 3.1 Eastern European X X X X
1251 Windows 3.1 Cyrillic X X X X
1252 Windows 3.1 US (ANSI) X X X X
1253 Windows 3.1 Greek X X X X
1254 Windows 3.1 Turkish X X X X
1255 Hebrew X X
1256 Arabic X X
1257 Baltic X X
1361 Korean (Johab) X ** X
437 MS-DOS United States X X X X
708 Arabic (ASMO 708) X X
709 Arabic (ASMO 449+, BCON V4) X X
710 Arabic (Transparent Arabic) X X
720 Arabic (Transparent ASMO) X X

Javascript

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

See live demo and download source code.

This awesome script developed by kostas-krevatas. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top