在 google chrome 浏览器中将 HTML 表导出为 csv

Posted 2023-02-22

【中文标题】在 google chrome 浏览器中将 HTML 表导出为 csv

【英文标题】：Export HTML table to csv in google chrome browser

【发布时间】：2014-08-27 22:35:47

【问题描述】：

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

当我点击 export 按钮时，我可以下载文件，但是当我尝试在 ms excel/Libre office calc 中打开时，它并没有在其中打开。

我甚至可以看到导出的数据，但它的显示相同，分开。

谁能建议我在 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'
    );

【参考方案1】：

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

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

var uri = URL.createObjectURL(xslData);

【参考方案2】：

在做了更多研究后，我得到了解决方案。

我已经改了

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

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

到

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

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

而且效果很好。似乎 chrome 在新版本中有所改变。

希望它可以帮助其他人。

【讨论】：

谢谢你；我一直在寻找这个奇怪的 Chrome 独特问题。我正在尝试对其他文件类型（另存为 txt/excel/pdf）执行此操作，但遇到了与我为 csv 所做的相同的问题——Chrome 只会下载没有扩展名和通用的文件名称“下载”。您是否碰巧有任何其他来源可以显示如何为其他文件类型执行此操作？似乎每个可用的插件或方法似乎都无法在 Chrome 中正常工作。

@Kyle 他们似乎在新版本的浏览器中放弃了对数据的支持。对于 pdf 我还没有尝试过，但对于 excel .csv 文件可以正常工作。我也会研究 pdf 和 excel，如果我有任何新的东西会更新你:)。

@Kyle 我对 pdf 做了一些研究，我发现了一个非常棒的 js 库，这里是链接 github.com/MrRio/jsPDF。我尝试使用当前代码，但没有得到任何有用的东西