使用vanilla javascript将HTML表导出为CSV

Question

我正在尝试在我的网站中添加csv下载选项的功能。它应该将网站中存在的html表格转换为csv内容，并使其可下载。我一直在互联网上寻找一个好的插件，找到了一些像http://www.dev-skills.com/export-html-table-to-csv-file/这样有用的插件，但它使用的是php script来做下载部分。我想知道是否有一个纯javascript库可用来使用服务器端软件，如node.js，而不使用php?？

Answer 1

应该可以在每个现代浏览器上工作，不需要jQuery或任何依赖，这里是我的实现：

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
    // Select rows from table_id
    var rows = document.querySelectorAll('table#' + table_id + ' tr');
    // Construct csv
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            // Clean innertext to remove multiple spaces and jumpline (break csv)
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
            data = data.replace(/"/g, '""');
            // Push escaped string
            row.push('"' + data + '"');
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join('\n');
    // Download it
    var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
    var link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

然后添加下载按钮/链接：

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>

CSV文件带有时间标记，并与默认Excel格式兼容。

注释后更新:增加了第二个参数“分隔符”，它可以用来配置另一个字符，比如;，如果你有用户在世界不同的地区下载你的csv，因为他们可以使用另一个默认的分隔符，更多信息请参见：https://superuser.com/a/606274/908273

Answer 2

仅使用jQuery、普通的Javascript和table2CSV库：

export-to-html-table-as-csv-file-using-jquery

将以下代码放入要在head部分加载的脚本中：

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

备注：

需要jQuery和table2CSV：在上面的脚本之前添加对这两个库的脚本引用。

以table选择器为例，您可以根据需要对其进行调整。

它只能在完全支持Data URI的浏览器中运行:火狐、Chrome和Opera，不能在IE中运行，IE只支持在页面中嵌入二进制图像数据的Data URIs。

为了完全兼容浏览器，您必须使用一种稍微不同的方法，即需要一个服务器端脚本来echo CSV。

Answer 3

在http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html上有一个非常简单的免费开源解决方案

首先从https://github.com/jmaister/excellentexport/releases/tag/v1.4下载javascript文件和示例文件

html页面如下所示。

确保javascript文件在同一文件夹中，或者相应地更改html文件中脚本的路径。

<html>
<head>
    <title>Export to excel test</title>
    <script src="excellentexport.js"></script>
    <style>
        table, tr, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>ExcellentExport.js</h1>

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.

    <h3>Test page</h3>

    <br/>

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
    <br/>

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
    <br/>

    <table id="datatable">
        <tr>
            <th>Column 1</th>
            <th>Column "cool" 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>100,111</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>More text</td>
            <td>Text with
                new line</td>
        </tr>
    </table>

</body>

​

这是非常容易使用的，因为我已经尝试了大多数其他方法。