將帶有 rowspan 和 colspan 的 html 表導出到 csv 或 xls

Question

我有一個如下圖所示的網格。

在這里，我們使用 rowspans 和 colspans 使其跨越一定數量的行和列。

我想將相同的內容導出到 excel 或 csv，但它應該保留被跨越的行和列的格式。

有沒有更簡單的方法可以使用 Javascript 和 HTML 來做到這一點？

Answer 1

簡短回答：對不起，不。沒有簡單的方法。

長答案：雖然有一些簡單的方法可以將結構化的 html 表轉換為 xls 或 csv（參見示例： HTML 表到 CSV/Excel 轉換器），但表中的不規則和多級標題以及colspan和rowspan ，顛覆了表中的邏輯關系和可預測性。

提示/建議：通過對表格結構進行一些改動，它很容易成為：

1. 機器可讀性更強，因此更容易導出和操作；
2. 更具人類可讀性，包括使用輔助技術的用戶更易於訪問。

具體來說：

• 使用列表而不是表格單元格來列出城市
• 禁止在其他單元rowspan上使用colspan和rowspan
• 刪除多級表頭。 colspan is definitely redundant, and ultimately unnecessary.頂排房屋 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>