javascript 在谷歌浏览器中将 HTML 表格导出到 csv

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24610694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 03:07:22  来源:igfitidea点击:

Export HTML table to csv in google chrome browser

javascriptphpjquerygoogle-chromecsv

提问by Kalpit

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.

我通过使用它有以下功能我将我的 html 导出到 Csv 文件。几天/几个月前,它在 google chrome 浏览器中运行良好(在 FF 中仍然运行良好)。现在突然停止将数据转换为 csv 格式的工作。

when i am clicking on exportbutton i am able to download file but when i am trying to opening in ms excel/Libre office calcits not opening in it.

当我单击导出按钮时,我可以下载文件,但是当我尝试在ms excel/Libre office calc 中打开时,它没有在其中打开。

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.

任何人都可以建议我在 google chrome 浏览器中我的代码出了什么问题。

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

回答by Kalpit

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.

它工作正常。似乎 chrome 在新版本中改变了一些东西。

Hope it may help others.

希望它可以帮助其他人。

回答by hatice bulut

My solution is for excel file export:

我的解决方案是导出excel文件:

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

var uri = URL.createObjectURL(xslData);