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 == "&nbsp;")
                                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'
    });
}

score 38 · Accepted Answer · edited Jul 10 '17 at 07:26

38

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.

edited Jul 10 '17 at 07:26

shreedhar bhat

4,779
1
18
23

answered Jul 07 '14 at 12:54

Kalpit

4,906
4
25
43

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. – Kyle Bachan Jul 07 '14 at 18:43
@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 :). – Kalpit Jul 08 '14 at 09:40
@Kyle i have done some research for pdf i found one js library which is just awsome here is the link https://github.com/MrRio/jsPDF. i tried with current code but didn't get anything usefull – Kalpit Jul 08 '14 at 15:49

score 0 · Answer 2 · edited Jun 19 '19 at 07:43

0

My solution is for excel file export:

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

var uri = URL.createObjectURL(xslData);

edited Jun 19 '19 at 07:43

Kobe

6,226
1
14
35

answered Jun 19 '19 at 07:31

hatice bulut

1
1

Export HTML table to csv in google chrome browser

2 Answers2

Linked