html - js导出文件 - js导出表格




如何将html表数据导出为.csv文件? (5)

我在网站的html表中有一个数据表,需要知道如何将该数据导出为.csv文件。

这怎么办?


如果不经常需要,请尝试使用几个firefox插件中的一个,这有助于将HTML表格数据复制到剪贴板(例如, https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/ )。 例如,对于'table2clipboard'附加组件:

  1. 在Firefox中安装附加组件
  2. 在Firefox中打开网页(带表格)
  3. 右键单击表格中的任意位置,然后选择“复制整个表格”
  4. 启动一个电子表格应用程序,如LibreOffice Calc
  5. 粘贴到电子表格中(根据需要选择适当的分隔符)
  6. 将电子表格保存/导出为CSV格式。

您可以使用Chrome的扩展程序,这在我尝试过的时候效果很好。

https://chrome.google.com/webstore/search/html%20table%20to%20csv?_category=extensions

安装时和带有表格的任何网页上如果单击此扩展程序的图标,它会显示页面中的所有表格,当您翻转列出的表格时突出显示每个表格,单击允许您将其复制到剪贴板或将其保存到Google Doc。

它非常适合我需要的东西,偶尔将基于Web的表格数据转换为我可以使用的电子表格。


我简要介绍了使用Google Spreadsheets( importHTML )和Python(Pandas read_htmlto_csv )执行此操作的简单方法,以及我在这里回答的示例Python脚本: https://.com/a/28083469/1588795 : to_csv https://.com/a/28083469/1588795 。


我能够使用这里概述的答案: 使用jQuery和html导出到CSV并添加一个修改以使其在IE中工作,并在评论中提到的另一个修改从表中获取thead。

function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // Temporary delimiter characters unlikely to be typed by keyboard
        // This is to avoid accidentally splitting the actual contents
        tmpColDelim = String.fromCharCode(11), // vertical tab character
        tmpRowDelim = String.fromCharCode(0), // null character

        // actual delimiter characters for CSV format
        colDelim = '","',
        rowDelim = '"\r\n"',

        // Grab text from table into CSV formatted string
        csv = '"' + $rows.map(function (i, row) {
            var $row = $(row), $cols = $row.find('td,th');

            return $cols.map(function (j, col) {
                var $col = $(col), text = $col.text();

                return text.replace(/"/g, '""'); // escape double quotes

            }).get().join(tmpColDelim);

        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim) + '"',



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

        console.log(csv);

        if (window.navigator.msSaveBlob) { // IE 10+
            //alert('IE' + csv);
            window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
        } 
        else {
            $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); 
        }
}

// This must be a hyperlink
$("#xx").on('click', function (event) {

    exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
});

我的链接看起来像这样......

<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>

JsFiddle: https://jsfiddle.net/mnsinger/65hqxygo/ ://jsfiddle.net/mnsinger/65hqxygo/


这是一个非常快速的CoffeeScript / jQuery示例

csv = []
for row in $('#sometable tr')
  csv.push ("\"#{col.innerText}\"" for col in $(row).find('td,th')).join(',')
output = csv.join("\n")




export-to-csv