Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114

Question

I am trying to refer to this code where a we are downloading a CSV file on click of a link.

$(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('"', '""'); // escape double quotes                  }).get().join(tmpColDelim);              }).get().join(tmpRowDelim)                 .split(tmpRowDelim).join(rowDelim)                 .split(tmpColDelim).join(colDelim) + '"',              // Data URI             csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);          $(this)             .attr({             'download': filename,                 'href': csvData,                 'target': '_blank'         });     }      // This must be a hyperlink     $(".export").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     }); }); 

But somehow, the downloaded file is named as download without extension in Chrome v35.0.1916.114 , one workaround was to change data:application/csv to data:text/csv, but that only helped in getting the extension correct in the downloaded file i.e. it now downloads as download.csv.

The issue with the download attribute still remains. I wanted to name my file as export.csv, but it still gives me download.csv.

Answer 1

So you should change this:

// Data URI csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);  $(this)     .attr({     'download': filename,         'href': csvData,         'target': '_blank' }); 

To This

// Data URI //csvData = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv), //old way blob = new Blob([csv], { type: 'text/csv' }); //new way var csvUrl = URL.createObjectURL(blob);  $(this) .attr({     'download': filename,     'href': csvUrl }); 

And it should work!