Export HTML Table to CSV

Download to CSV

Something cool I challenged myself with during our short coding stint here at GA was a way to take the donation history table data and export it to a .csv file. CSV files are widely used in the non-profit space for tracking donations and for Venmo users, it could be used for tax purposes as well. Here's the HTML and JS:


Javascript adapted from Terry Young's post:

<a href="#" class="exportcsv button">Download CSV</a>
<div id="dvData">
  <table class="tablesorter">
        <th class="date">Date</th>
        <th class="to">Donation Made To</th>
        <th class="amount">Amount</th>
        <td class="date">1/15/2015</td>
        <td class="to">Johns Hopkins University ALS Clinic</td>
        <td class="amount">$80.00 USD</td>
        <td class="date">2/1/2015</td>
        <td class="to">American Heart Association</td>
        <td class="amount">$10.00 USD</td>
        <td class="date">2/24/2015</td>
        <td class="to">Virginia Commonwealth Univeristy School of the Arts</td>
        <td class="amount">$30.00 USD</td>
        <td class="date">3/16/2015</td>
        <td class="to">American Red Cross</td>
        <td class="amount">$10.00 USD</td>
        <td class="date">4/20/2015</td>
        <td class="to">World Wide Fund for Nature</td>
        <td class="amount">$20.00 USD</td>
$(document).ready(function () {
    function exportTableToCSV($table, filename) {
        var $rows = $table.find('tr:has(td)'),
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');
                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
                    return text.replace(/"/g, '""'); // escape double quotes
                .split(tmpColDelim).join(colDelim) + '"',
            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
            'download': filename,
                'href': csvData,
                'target': '_blank'
    // This must be a hyperlink
    $(".exportcsv").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink