將 HTML 表單導出到 Excel CSV 不使用 Element.append() 方法

Question

按照我之前的查詢：

HTML 表格 output 作為表格

我想將我的 HTML 從 output 導出到 Excel。

我在 web 上找到了幾個例子，並嘗試了其中一些......

https://www.revisitclass.com/css/how-to-export-download-the-html-table-to-excel-using-javascript/

https://www.codexworld.com/export-html-table-data-to-csv-using-javascript/

https://odoepner.wordpress.com/2012/04/09/export-to-html-table-as-csv-file-using-jquery/

在所有情況下，我只得到列標題而不是其他行，如下所示：

Element.append()有問題，無法正確提取

我的代碼如下所示：

    <table id="opresults" class="outputtable"><p class="outputtablehead">Survey Form - output</p>
     <tr class="colname">
       <th class="question">Form question</th>
       <th colspan="2" class="answer">Answer</th>
     </tr>
     <tr>
        <td></td>
        <td></td>
     </tr>
    </table>

        <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset");

        new URLSearchParams(window.location.search).forEach((value, name) => {
            resultsList.append(document.createElement('tbody'))
            resultsList.append(`${name}`)
            resultsList.append(document.createElement('td'))
            resultsList.append(`${value}`)
            resultsList.append(document.createElement('br'))   
            })
           </script>

另一個腳本，將文件導出到.csv 包含在這里：

https://jsfiddle.net/c0urwa5g/1/

有沒有辦法在 this.csv 導出中包含append() method ？

根據另一個例子：

如何將 JavaScript 數組信息導出到 csv（在客戶端）？

看起來我必須定義列名和行名。 不幸的是，我不能在這里，因為它們是依賴於輸入的。 有沒有辦法解決這個問題？

另一種方法的代碼在這里：

function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;

// CSV file
csvFile = new Blob([csv], {type: "text/csv"});

// Download link
downloadLink = document.createElement("a");

// File name
downloadLink.download = filename;

// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);

// Hide download link
downloadLink.style.display = "none";

// Add the link to DOM
document.body.appendChild(downloadLink);

// Click download link
downloadLink.click();
 }

 function exportTableToCSV(filename) {
 var csv = [];
 var rows = document.querySelectorAll("table tr");

 for (var i = 0; i < rows.length; i++) {
    var row = [], cols = rows[i].querySelectorAll("td, th");
    
    for (var j = 0; j < cols.length; j++) 
        row.push(cols[j].innerText);
    
    csv.push(row.join(","));        
  }

  // Download CSV file
  downloadCSV(csv.join("\n"), filename);
  }

Answer 1

您沒有創建行元素或在這些行元素中插入單元格或將文本插入到您正在創建的單元格中

您正在嘗試將 append 的所有內容直接放入表格元素中，但這是行不通的。

您可以使用Table.insertRow()和Row.insertCell()簡化此操作

 initDemo() const resultsList = document.getElementById('opresults'); new URLSearchParams(window.location.search).forEach((value, name) => { const row = resultsList.insertRow(); [name, value].forEach(v => row.insertCell().textContent = v); }) // for demo only - creates initial url search params function initDemo() { const params = new URLSearchParams([ ["issue_1", "answer_1"], ["thing_2", "answer_2"] ]); history.pushState(null, null, '?' + params.toString()) }

 <p class="outputtablehead">Survey Form - output</p> <table id="opresults" class="outputtable" border="1"> <tr class="colname"> <th class="question">Form question</th> <th colspan="2" class="answer">Answer</th> </tr> </table>