[jquery] Export to CSV using jQuery and html

Demo

See below for an explanation.

_x000D_
_x000D_
$(document).ready(function() {_x000D_
_x000D_
  function exportTableToCSV($table, filename) {_x000D_
_x000D_
    var $rows = $table.find('tr:has(td)'),_x000D_
_x000D_
      // Temporary delimiter characters unlikely to be typed by keyboard_x000D_
      // This is to avoid accidentally splitting the actual contents_x000D_
      tmpColDelim = String.fromCharCode(11), // vertical tab character_x000D_
      tmpRowDelim = String.fromCharCode(0), // null character_x000D_
_x000D_
      // actual delimiter characters for CSV format_x000D_
      colDelim = '","',_x000D_
      rowDelim = '"\r\n"',_x000D_
_x000D_
      // Grab text from table into CSV formatted string_x000D_
      csv = '"' + $rows.map(function(i, row) {_x000D_
        var $row = $(row),_x000D_
          $cols = $row.find('td');_x000D_
_x000D_
        return $cols.map(function(j, col) {_x000D_
          var $col = $(col),_x000D_
            text = $col.text();_x000D_
_x000D_
          return text.replace(/"/g, '""'); // escape double quotes_x000D_
_x000D_
        }).get().join(tmpColDelim);_x000D_
_x000D_
      }).get().join(tmpRowDelim)_x000D_
      .split(tmpRowDelim).join(rowDelim)_x000D_
      .split(tmpColDelim).join(colDelim) + '"';_x000D_
_x000D_
    // Deliberate 'false', see comment below_x000D_
    if (false && window.navigator.msSaveBlob) {_x000D_
_x000D_
      var blob = new Blob([decodeURIComponent(csv)], {_x000D_
        type: 'text/csv;charset=utf8'_x000D_
      });_x000D_
_x000D_
      // Crashes in IE 10, IE 11 and Microsoft Edge_x000D_
      // See MS Edge Issue #10396033_x000D_
      // Hence, the deliberate 'false'_x000D_
      // This is here just for completeness_x000D_
      // Remove the 'false' at your own risk_x000D_
      window.navigator.msSaveBlob(blob, filename);_x000D_
_x000D_
    } else if (window.Blob && window.URL) {_x000D_
      // HTML5 Blob        _x000D_
      var blob = new Blob([csv], {_x000D_
        type: 'text/csv;charset=utf-8'_x000D_
      });_x000D_
      var csvUrl = URL.createObjectURL(blob);_x000D_
_x000D_
      $(this)_x000D_
        .attr({_x000D_
          'download': filename,_x000D_
          'href': csvUrl_x000D_
        });_x000D_
    } else {_x000D_
      // Data URI_x000D_
      var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);_x000D_
_x000D_
      $(this)_x000D_
        .attr({_x000D_
          'download': filename,_x000D_
          'href': csvData,_x000D_
          'target': '_blank'_x000D_
        });_x000D_
    }_x000D_
  }_x000D_
_x000D_
  // This must be a hyperlink_x000D_
  $(".export").on('click', function(event) {_x000D_
    // CSV_x000D_
    var args = [$('#dvData>table'), 'export.csv'];_x000D_
_x000D_
    exportTableToCSV.apply(this, args);_x000D_
_x000D_
    // If CSV, don't do event.preventDefault() or return false_x000D_
    // We actually need this to be a typical hyperlink_x000D_
  });_x000D_
});
_x000D_
a.export,_x000D_
a.export:visited {_x000D_
  display: inline-block;_x000D_
  text-decoration: none;_x000D_
  color: #000;_x000D_
  background-color: #ddd;_x000D_
  border: 1px solid #ccc;_x000D_
  padding: 8px;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<a href="#" class="export">Export Table data into Excel</a>_x000D_
<div id="dvData">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>Column One</th>_x000D_
      <th>Column Two</th>_x000D_
      <th>Column Three</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row1 Col1</td>_x000D_
      <td>row1 Col2</td>_x000D_
      <td>row1 Col3</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row2 Col1</td>_x000D_
      <td>row2 Col2</td>_x000D_
      <td>row2 Col3</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row3 Col1</td>_x000D_
      <td>row3 Col2</td>_x000D_
      <td>row3 Col3</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row4 'Col1'</td>_x000D_
      <td>row4 'Col2'</td>_x000D_
      <td>row4 'Col3'</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row5 &quot;Col1&quot;</td>_x000D_
      <td>row5 &quot;Col2&quot;</td>_x000D_
      <td>row5 &quot;Col3&quot;</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>row6 "Col1"</td>_x000D_
      <td>row6 "Col2"</td>_x000D_
      <td>row6 "Col3"</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>
_x000D_
_x000D_
_x000D_


As of 2017

Now uses HTML5 Blob and URL as the preferred method with Data URI as a fallback.

On Internet Explorer

Other answers suggest window.navigator.msSaveBlob; however, it is known to crash IE10/Window 7 and IE11/Windows 10. Whether it works using Microsoft Edge is dubious (see Microsoft Edge issue ticket #10396033).

Merely calling this in Microsoft's own Developer Tools / Console causes the browser to crash:

navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");

?Four years after my first answer, new IE versions include IE10, IE11, and Edge. They all crash on a function that Microsoft invented (slow clap).

Add navigator.msSaveBlob support at your own risk.


As of 2013

Typically this would be performed using a server-side solution, but this is my attempt at a client-side solution. Simply dumping HTML as a Data URI will not work, but is a helpful step. So:

  1. Convert the table contents into a valid CSV formatted string. (This is the easy part.)
  2. Force the browser to download it. The window.open approach would not work in Firefox, so I used <a href="{Data URI here}">.
  3. Assign a default file name using the <a> tag's download attribute, which only works in Firefox and Google Chrome. Since it is just an attribute, it degrades gracefully.

Notes

Compatibility

Browsers testing includes:

  • Firefox 20+, Win/Mac (works)
  • Google Chrome 26+, Win/Mac (works)
  • Safari 6, Mac (works, but filename is ignored)
  • IE 9+ (fails)

Content Encoding

The CSV is exported correctly, but when imported into Excel, the character ü is printed out as ä. Excel interprets the value incorrectly.

Introduce var csv = '\ufeff'; and then Excel 2013+ interprets the values correctly.

If you need compatibility with Excel 2007, add UTF-8 prefixes at each data value. See also:

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to csv

Pandas: ValueError: cannot convert float NaN to integer Export result set on Dbeaver to CSV Convert txt to csv python script How to import an Excel file into SQL Server? "CSV file does not exist" for a filename with embedded quotes Save Dataframe to csv directly to s3 Python Data-frame Object has no Attribute (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape How to write to a CSV line by line? How to check encoding of a CSV file

Examples related to export

Export multiple classes in ES6 modules Why Is `Export Default Const` invalid? How to properly export an ES6 class in Node 4? ES6 export all values from object Export a list into a CSV or TXT file in R How to export database schema in Oracle to a dump file Excel VBA to Export Selected Sheets to PDF How to export all data from table to an insertable sql format? Export pictures from excel file into jpg using VBA -bash: export: `=': not a valid identifier

Examples related to export-to-csv

Excel: macro to export worksheet as CSV file without leaving my current Excel sheet Export to csv/excel from kibana How to export data from Spark SQL to CSV How to export a table dataframe in PySpark to csv? Java - Writing strings to a CSV file How to export dataGridView data Instantly to Excel on button click? Export javascript data to CSV file without server interaction How to create and download a csv file from php script? Export to CSV using jQuery and html export html table to csv