通过JavaScript将用户输入的HTML表导出为CSV

Question

我正在寻找一种将html表导出到CSV文件的方法。 我已经找到了一个解决方案，不幸的是，它似乎仅适用于静态内容。 有人知道导出用户输入的表格的方法吗？

我在下面发布代码。 我还做了一个小提琴https://jsfiddle.net/xn0agk7L/2/

<form action="#">
        <input type="button" value="Empfänger hinzufügen" onclick="addRow('myTable')"/>
        <input type="button" value="Empfänger löschen" onclick="deleteRow('myTable')"/>
        <div class="table-wrapper">
            <div class="table-scroll">
                <table id="myTable" border=1>
                    <tr>
                        <th>#</th>
                        <th>Geschlecht</th>
                        <th>Anrede</th>
                        <th>Vorname</th>
                        <th>Nachname</th>
                        <th>Titel</th>
                        <th>E-Mail</th>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                <label>
                                    <input type="checkbox" name="chk"/>
                                    <span></span>
                                </label>
                            </p>
                        </td>
                        <td>
                            <div class="input-field">
                                <div>
                                    <select class="browser-default genderSelect" id="selectOption1" required>
                                        <option value="Bitte auswählen" selected>Bitte auswählen</option>
                                        <option value="Männlich">Männlich</option>
                                        <option value="Weiblich">Weiblich</option>
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="input-field">
                                <div>
                                    <select class="browser-default genderSelect" id="selectOption2" required>
                                        <option value="Bitte auswählen" selected>Bitte auswählen</option>
                                        <option value="Sehr geehrter">Sehr geehrter</option>
                                        <option value="Sehr geehrte">Sehr geehrte</option>
                                        <option value="Lieber">Lieber</option>
                                        <option value="Liebe">Liebe</option>
                                        <option value="Werter">Werter</option>
                                        <option value="Werte">Werte</option>
                                        <option value="Hallo">Hallo</option>
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input id="vorname" type="text" class="validate">
                        </td>
                        <td>
                            <input id="nachname" type="text" class="validate">
                        </td>
                        <td>
                            <input id="titel" type="text">
                        </td>
                        <td>
                            <input id="vorname" type="text" class="validate">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
<br>
<button onclick="exportTableToCSV('members.csv')">Export HTML Table To CSV File</button>

<script type="application/x-javascript">
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);
    }
</script>

Answer 1

尝试使用数据表 Jquery库。 他们提供了与之相关的所有内容的非常好的文档。 您可以将html表导出为CSV，PDF等，还有更多其他格式。