【问题标题】:What's the best way to export an HTML table to CSV if it has some cells with text and other cells with just a value attribute?如果 HTML 表格有一些带有文本的单元格和其他只有一个值属性的单元格,那么将 HTML 表格导出为 CSV 的最佳方法是什么?
【发布时间】:2018-01-29 23:21:12
【问题描述】:

基本上我正在尝试将具有以下结构的表导出到 CSV:

如您所见,文本值和输入值混合在一起,这使得很难在没有任何空白值的情况下获取整个表格。我发现了一些大部分工作的代码,但是当单元格是输入时,导致单元格只有“$”或“%”:

function exportTableToCSV($table, filename) {

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


        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();
                console.log($col.text())
                console.log($col)
                // console.log($col)
                // console.log(j)

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

有没有人建议我可以采取什么方法来获取节点值并将其替换为单元格缺少文本值的位置?我尝试获取 .innerText,但由于某种原因,这似乎破坏了表的功能(更新输入将不再更新输出)。任何建议都会很有用。

【问题讨论】:

  • text = $('input', $col).length > 0 : $('input', $col).val() + $col.text() : $col.text()

标签: javascript excel csv


【解决方案1】:

Wild beard 解决了这个问题,尽管在三元运算符语法中有错字。这是修正后的版本:

function exportTableToCSV($table, filename) {

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


        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 = $('input', $col).length > 0 ? $('input', $col).val() 
                + $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' });
        }
}

【讨论】:

    猜你喜欢
    • 2011-11-05
    • 1970-01-01
    • 1970-01-01
    • 2017-09-03
    • 1970-01-01
    • 1970-01-01
    • 2010-11-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多