javascript - 使用 vanilla javascript 将 HTML 表导出为 CSV

Question

我正在尝试在我的网站中添加 csv 下载选项的功能。它应该将网站中存在的 html 表转换为 csv 内容并使其可下载。我一直在网上搜索一个好的插件，发现了一些有用的插件，比如 http://www.dev-skills.com/export-html-table-to-csv-file/但它使用 php 脚本来完成下载部分。我想知道是否有一个纯 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，这很有用世界区域，因为他们可以为 Excel 使用另一个默认分隔符，有关更多信息，请参阅:https://superuser.com/a/606274/908273