Export HTML table to csv in google chrome browser

Question

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'
    });
}

Rhapsodist

Answer 1

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

i have changed this

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

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

To

 var 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.

Rhapsodist

Thanks for this; I've been searching forever for this strange Chrome unique issue. I'm attempting to do this with other file types (save as txt/excel/pdf) but am running into the same issues that I did for the csv--in that Chrome would just download the file without an extension and with the generic name "download". Would you happen to have any other sources that might show how to do this for the other file types? It seems like every plugin or method available doesn't seem to work properly in Chrome. – Terrazzo

@Kyle they have drop support of data in new version of browser it seems. for pdf i haven't tried yet but for excel .csv file will work fine. i will do research about pdf and excel also and if i gets anything new will update you :). – Rhapsodist

@Kyle i have done some research for pdf i found one js library which is just awsome here is the link github.com/MrRio/jsPDF. i tried with current code but didn't get anything usefull – Rhapsodist

Answer 2

My solution is for excel file export:

var xslData = new Blob([$('#printableSearchResults').html()], { type: 'text/vnd.ms-excel' });

var uri = URL.createObjectURL(xslData);

Farrar