Kalpit Kalpit - 4 months ago 66
Javascript Question

Export HTML table to csv in google chrome browser

i have following function by using this i am exporting my html to Csv file. few days/months ago it was working fine in google chrome browser (still its working fine in FF). now suddenly it stops working to convert data in to csv format.

when i am clicking on export button i am able to download file but when i am trying to opening in ms excel/Libre office calc its not opening in it.

i can see even exported data also but its showing same as , separated.

can anyone suggest me whats going wrong with my code in google chrome browser.

function exportReportTableToCSV($table, filename) {
var dumpd='';
var csvData ='';

$table.each(function(){
var $rows = $(this).find('tr:has(td)');
var $header = $(this).find('tr:has(th)');

tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character

colDelim = '","',
rowDelim = '"\r\n"',

csv = '"' + $header.map(function (i, head) {
var $head = $(head),
$cols = $head.find('th');

return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();

if(text == " ")
text = "";
if(text == "PROGRAMS")
text = "";
console.log(text);
return text.replace('"', '""');

}).get().join(tmpColDelim);

}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"' ;

csv+='\r\n';

csv+= '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');

return $cols.map(function (j, col) {
var $col = $(col);
var text;
if($($(col)).find("input:checkbox").length > 0)
text = $($(col)).find("input:checkbox").prop('checked') ? 'Yes' : 'No';
else
text = $col.text();

if(text === "")
{
text = "";
}

return text.replace('"', '""');

}).get().join(tmpColDelim);

}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';

dumpd+=csv+"\n\n";
});


csvData ='data:application/csv;charset=utf-8,' + encodeURIComponent(dumpd);

$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}

Answer

after doing some more research i got the solution for this.

i have changed this

csvData ='data:application/csv;charset=utf-8,' + encodeURIComponent(dumpd);

$(this)
    .attr({
    'download': filename,
        'href': csvData,
        'target': '_blank'
});

To

 csvData = new Blob([dumpd], { type: 'text/csv' }); //new way
    var csvUrl = URL.createObjectURL(csvData);

    $(this)
    .attr({
        'download': filename,
        'href': csvUrl
    });

and it worked fine. it seems chrome has changed something in new version.

Hope it may help others.