javascript - 如何将 html 表格转换为 csv 字符串

Question

我有一个表，里面有 thead、tfoot、tr、td 和 th。 td 或 th 具有 colspan 或 rowspan 属性，如何将其转换为 csv 字符串，并且每个合并的单元格未合并为多个字段？

例如:

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tr>
    <td rowspan='2'>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tfoot>
    <tr>
      <th colspan='2'>6 <span style='display:none'> 7 
</span> 8</th>
    </tr>
  </tfoot>
</table>

应该输出:

"1","2"
"3","4"
"","5"
"6  7  8",""

除了table2CSV还有其他插件吗？因为这个在第一行而不是最后一行显示 tfoot，所以也合并了显示为单个字段的单元格。

Answer 1

我制作了一个 100% 不含 jQuery 的插件。

您可以立即将其与 jQuery 集成。

我们的目标是尝试以尽可能最好的方式完成这项工作。

这是代码:

(function(window,undefined){

    window.T2CSV=function(table){
        if(! (table instanceof window.HTMLTableElement))
        {
            throw new window.TypeError('A <table> element is required, instead '+table+' was passed');
        }

        var tr,thead,csv,tfoot,cols,prop=(table.innerText===undefined?'textContent':'innerText'),
            setVars=function(){
                var elements=table.getElementsByTagName('tr');

                if(elements.length<1)
                {
                    throw new window.RangeError('At least 1 <tr> element is required, you have 0 on your <table>.');
                }

                tr=Array.prototype.slice.call(elements,1);
                thead=elements[0];
                cols=thead.children.length;
                elements=null; //free memory
                csv='';

            },
            render={
                header:function(){
                    if(! (thead.children[0] instanceof window.HTMLTableCellElement))
                    {
                        throw new window.RangeError('At least 1 <tr> element with 1 <td> or <th> is required.');
                    }

                    for(var i=0,children=thead.children,l=children.length,csv=[];i<l;i++)
                    {
                        csv[csv.length]='"'+children[i][prop]+'"';
                    }
                    children=null; //free memory
                    return csv;
                },
                data:function(){

                    if(!tr.length)
                    {
                        return '';
                    }

                    for(var i=0,l=tr.length,csv=[],tfoot=false;i<l;i++)
                    {
                        if(!tfoot && tr[i].parentNode.tagName=='TFOOT')
                        {
                            tfoot=tr[i];
                            continue;
                        }
                        csv[csv.length]=render.row(tr[i]);
                    }

                    if(tfoot)
                    {
                        csv[csv.length]=render.row(tfoot);
                    }

                    return csv.join('\r\n');
                },
                row:function(tr){
                    var td=tr.getElementsByTagName('td');

                    if(!td.length)
                    {
                        td=tr.getElementsByTagName('th');
                    }

                    for(var i=0,tmp=[];i<cols;i++)
                    {
                        tmp[i]=td[i]?'"'+td[i][prop]+'"':'""';
                    }
                    return tmp+'';
                }
            };

        setVars();

        return {
            toString:function(){
                if(csv)
                {
                    return csv;
                }

                return csv = [render.header(),render.data()].join('\r\n');
            },
            valueOf:function(){return this.toString();},
            refresh:function(){
                setVars();
            }
        }

    }

})(function(){}.constructor('return this')());

This: function(){}.constructor('return this')() 是一个受 JSFuck 启发的漂亮技巧，它返回 REAL 窗口 对象始终!
在此处查看来源:http://www.jsfuck.com/

它缺少注释，但我很确定我所做的事情很容易理解。

如果我错了，请发表评论，我会让这更容易理解。

用法很简单:只需传递一个表(一个纯表，里面没有jQuery，否则会阻塞)并将其转换为字符串。

生成的 csv 已缓存，因此多次访问速度非常快。

方法.refresh()将破坏该缓存。

这不是最有效的方法，但它确实有效。

由于明显的原因，输出会有点不同。

而不是这个:

"1","2"
"3","4"
"","5"
"6  7  8",""

它产生这个:

"1","2"
"3","4"
"5",""
"6  7  8",""

代码可以轻松定制。

我正在考虑更新它并为分隔符和配置添加转义符。

在此处查看实际情况:http://jsfiddle.net/qw8ponhu/2/

<小时/>

更新(2014 年 11 月 15 日):

我做了一个改进的版本!

它现在转义斜杠和双引号。

我还没有添加对更多分隔符和文本引号的支持。

这是我的代码:

(function(window,undefined){
    window.T2CSV=function(table){
        if(!(table instanceof window.HTMLTableElement))
        {
            throw new window.TypeError('A <table> element is required, instead '+table+' was passed');
        }

        var tr,thead,cols,tfoot,csv={
                header:'',
                data:[],
                footer:'',
                string:''
            },
            prop=(table.innerText===undefined?'textContent':'innerText'),
            setVars=function(){
                var elements=table.getElementsByTagName('tr');

                if(elements.length<1)
                {
                    throw new window.RangeError('At least 1 <tr> element is required, you have 0 on your <table>.');
                }

                tr=Array.prototype.slice.call(elements,1);
                thead=elements[0];
                cols=thead.children.length;
                elements=null; //free memory
                csv={
                    header:'',
                    data:[],
                    footer:'',
                    string:''
                };
            },
            addSlashes=function(data){
                return data.replace(/([\\"])/g,'\\$1');
            },
            render={
                header:function(){
                    if(! (thead.children[0] instanceof window.HTMLTableCellElement))
                    {
                        throw new window.RangeError('At least 1 <tr> element with 1 <td> or <th> is required.');
                    }

                    for(var i=0,children=thead.children,l=children.length,tmp=[];i<l;i++)
                    {
                        tmp[tmp.length]='"'+addSlashes(children[i][prop])+'"';
                    }
                    children=null; //free memory
                    return csv.header=tmp;
                },
                data:function(){

                    if(!tr.length)
                    {
                        return '';
                    }

                    for(var i=0,l=tr.length,tmp=[],tfoot=false;i<l;i++)
                    {
                        if(!tfoot && tr[i].parentNode.tagName=='TFOOT')
                        {
                            tfoot=tr[i];
                            continue;
                        }
                        csv.data[tmp.length]=tmp[tmp.length]=render.row(tr[i]);
                    }

                    if(tfoot)
                    {
                        csv.footer=tmp[tmp.length]=render.row(tfoot);
                    }

                    return tmp.join('\r\n');
                },
                row:function(tr){
                    var td=tr.getElementsByTagName('td');

                    if(!td.length)
                    {
                        td=tr.getElementsByTagName('th');
                    }

                    for(var i=0,tmp=[];i<cols;i++)
                    {
                        tmp[i]=td[i]?'"'+addSlashes(td[i][prop])+'"':'""';
                    }
                    return tmp+'';
                }
            };

        setVars();

        return {
            toString:function(){
                if(csv.string)
                {
                    return csv.string;
                }

                return csv.string = [render.header(),render.data()].join('\r\n');
            },
            valueOf:function(){return this.toString();},
            refresh:function(){
                setVars();
            },
            getHeader:function(){
                return csv.header;
            },
            getFooter:function(){
                return csv.footer;
            },
            getRows:function(){
                return csv.data;
            },
            getRow:function(row){
                return csv.data[row>>0];
            }
        };

    }

})(function(){}.constructor('return this')());

您可以在这里检查它的工作情况:http://jsfiddle.net/qw8ponhu/6/