TABLE to CSV and DOWNLOAD

tableCsvDownload.js

/**
 * Super Awesome CSV download Maker
 *
 * based heavily on the sweet new html5 download writeup by html5rocks
 * source: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
 *
 * Special Thanks to ZABB.co for the quick table parsing.
 */


/**
 * MARKUP
 * Add this to your HTML wherever you 
 * 
 <div id="container">
   <button onclick="downloadFile()">Create CSV</button>
   <output></output>
 </div>
 */


/** 
 * CONFIG VARIABLES 
 */
var tableId = 'ENTER_TABLE_ID_OF TABLE_WITH_DATA_YOU_WANT';
var downloadName = 'NAME_OF_FILE_TO_DOWNLOAD.EXT';  // don't forget to include the extension
const MIME_TYPE = 'text/csv';

var container = document.querySelector('#container');
var output = container.querySelector('output');

/**
 * TABLE_DATA => CSV 
 * Turn the Table Data into a CSV String to use as the download
 */
function csvFromTable(targetTableId){
  var headrow = "";
  var datarows = "";
  var csvData;

  $('#'+targetTableId).find('tr > th').each(function() {
    headrow += $(this).text() + ",";
  });

  // strip the trailing comma
  headrow = headrow.replace(/,$/g, "");

  $('#'+targetTableId).find('tr').each(function() {
    var tmprow = "";
    $(this).children("td").each(function() {
        tmprow += $(this).text() + ",";
    });

    // strip the trailing comma again
    tmprow = tmprow.replace(/,$/g, "");

    // add a newline
    tmprow += "\n";             

    // add this row to the main datarows variable
    datarows += tmprow;
  });

  csvData = headrow + datarows;
  return csvData;
}


/**
 * DOWNLOAD LINK SETUP
 * The HTML5Rocks part.
 */
// Rockstars use event delegation!
document.body.addEventListener('dragstart', function(e) {
  var a = e.target;
  if (a.classList.contains('dragout')) {
    e.dataTransfer.setData('DownloadURL', a.dataset.downloadurl);
  }
}, false);

document.body.addEventListener('dragend', function(e) {
  var a = e.target;
  if (a.classList.contains('dragout')) {
    cleanUp(a);
  }
}, false);

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 27) {  // Esc
    document.querySelector('details').open = false;
  } else if (e.shiftKey && e.keyCode == 191) { // shift + ?
    document.querySelector('details').open = true;
  }
}, false);

var cleanUp = function(a) {
  a.textContent = 'Downloaded';
  a.dataset.disabled = true;

  // Need a small delay for the revokeObjectURL to work properly.
  setTimeout(function() {
    window.URL.revokeObjectURL(a.href);
  }, 1500);
};


/**
 * CREATE THE DOWNLOAD
 * Slightly modified from HTML5Rocks script.
 */
var downloadFile = function() {
  typer = csvFromTable(tableId);
  window.URL = window.webkitURL || window.URL;

  var prevLink = output.querySelector('a');
  if (prevLink) {
    window.URL.revokeObjectURL(prevLink.href);
    output.innerHTML = '';
  }

  var bb = new Blob([typer], {type: MIME_TYPE});

  var a = document.createElement('a');
  a.download = downloadName;
  a.href = window.URL.createObjectURL(bb);
  a.textContent = 'Download ready';

  a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(':');
  a.draggable = true; // Don't really need, but good practice.
  a.classList.add('dragout');

  output.appendChild(a);

  a.onclick = function(e) {
    if ('disabled' in this.dataset) {
      return false;
    }

    cleanUp(this);
  };
};