Question

我有一个网格，如下图所示。

这里我们使用rowspans和colspans使它跨越到一定数量的行和列。

我想将相同的内容导出到excel或csv，但它应该保留跨越的行和列的格式。

使用Javascript和HTML有更简单的方法吗？

Answer 1

简答：抱歉，不。没有简单方式。

答案很长虽然有简单的方法可以将结构化html表格转换为xls或csv（例如参见：HTML Table to CSV/Excel Converter），但表格中的不规则和多级标题以及colspan和rowspan的多个实例，颠覆表中的逻辑关系和可预测性。

提示/建议：通过对表格结构的一些改动，可以很容易地：

更具机器可读性，因此更易于导出和操作;

使用辅助技术的用户可以更加人性化，包括更易于访问。

具体做法是：

使用列表而不是表格单元格列出城市

Nix在其他单元格上使用colspan和rowspan

删除多级表标题。顶行住房＆＃34; Place desc＆＃34; colspan绝对是多余的，最终是不必要的。

Answer 2

我有同样的问题，我自己用以下代码解决了：

将html表下载到csv文件的完整代码。

仅当您可以将列号放在特定行中时，代码才构成结构。在我的情况下，这是最后一个。

function download_table_as_csv(separator = ',') {
        // Change here to your table with jquery selector, by table_id or table class. this code uses CLASS 'table'.
        var rows = $('.table tr');
        // Construct csv
        var csv = [];
        var lastrow = []; var repeatrowval = [];
        var tabledata = [];
// the code is structured only if you can base the col numbers in a spesific row. in my situation it's the last tr in thead.         
var cols = $('.table > thead > tr:last > th').length; $('.table > thead > tr:last > th').attr('rowSpan','1');
        for (var i = 0; i < cols; i ++) {repeatrowval.push(1); lastrow.push('none')}
        for (var i = 0; i < rows.length -1; i++) { //loop every row
            console.log("row: " + i)
            var row = []; var col = rows[i].querySelectorAll('td, th');
            var col_len = 0;
            for (var j = 0; j < cols; j++) {
                var a=0;
                console.log(repeatrowval[j]);
                if (repeatrowval[j] > 1) {
                    data = lastrow[j]; repeatrowval[j] = repeatrowval[j] - 1;
                    console.log("row: " + i + " reapet_col: " + j + " = " + data);
                    row.push('"' + data + '"');
                } else {
                    if(col[col_len] === undefined) break;
                    var colspan = col[col_len].colSpan ?? 1 ;
                    console.log("col: " + j + ", colspan = " + colspan + ", repeatrowval: " + repeatrowval[j])
                    for (var r = 0; r < colspan; r++) { 
                        
                        var rowspan = col[col_len].rowSpan ?? 1 ;
                        //console.log('rowspan: ' +rowspan)
                        if (rowspan == 1) {
                            // Clean innertext to remove multiple spaces and jumpline (break csv)
                            var data = col[col_len].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, '""');
                            repeatrowval[j] = 1;
                            lastrow[j] = data
                            //}
                        } else {
                            // Clean innertext to remove multiple spaces and jumpline (break csv)
                            var data = col[col_len].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, '""');
                            lastrow[j] = data; repeatrowval[j] = rowspan;
                        }
                        // Push escaped string
                        console.log("row: " + i + " col: " + j + " = " + data);
                        row.push('"' + data + '"');
                        if(colspan > 1) {a++};
                    }
                    col_len++
                }
                if(a>0){j=+a};
            }
            csv.push(row.join(separator));
            tabledata.push(row);
        }
        var csv_string = csv.join('\n');
        // Download it
        var filename = 'export_Report_' + 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);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="download_table_as_csv();">Download Table as csv file</button>
<table class="table"><thead><tr><th colspan="3" rowspan="2"></th><th colspan="7">Attendance</th></tr><tr><th colspan="7">Nov</th></tr><tr><th>Class</th><th rowspan="1" colspan="2">Student Name</th><th colspan="1" rowspan="2">17</th><th colspan="1" rowspan="2" >18</th><th colspan="1" rowspan="2" >19</th><th colspan="1" rowspan="2" >23</th><th colspan="1" rowspan="2" >24</th><th colspan="1" rowspan="2" >25</th><th colspan="1" rowspan="2" >26</th></tr></thead><tbody><tr><th rowspan="25" >2-A</th><th rowspan="1" colspan="2" >Alan, Ahoshe</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Ael, Teddy</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Bel, Kham</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Fohr, Nlili</th><td>✅</td><td >❌</td><td >✅</td><td >❌</td><td >✅</td><td >❌</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Foman, Mdel</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Gorger, Cim</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >❌</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Goes, Joph</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >❌</td></tr><tr><th rowspan="1" colspan="2" >Hich, Cheel</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Kain, Nali</th><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Klon, Levpi</th><td>✅</td><td >✅</td><td>✅</td><td >✅</td><td >✅</td><td >✅</td><td >✅</td></tr><tr><th rowspan="1" colspan="2" >Le, Shlo</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Ahi, Hufd</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Leitz, Shru</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Rerg, Aeh</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Roeld, Did</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Rothb, An</th><td>❌</td><td>❌</td><td>❌</td><td>✅</td><td>❌</td><td>❌</td><td>❌</td></tr><tr><th rowspan="1" colspan="2" >Rubein, Moha</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Shel, Khak</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Sofer, Shia</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Strar, Jacob</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Teim, Jalb</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Wes, Pel</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Wes, Shan</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Wemer, Am</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><th rowspan="1" colspan="2" >Werer, Son</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="19" >2-B</th><th rowspan="1" colspan="2" >Ekin, Puda</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><th rowspan="1" colspan="2" >Fon, Shpoem</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><th rowspan="1" colspan="2" >Fron, Aor</th><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr></tbody></table>

将rowspan和colspan导出到hs表到csv或xls

2 个答案: