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

Question

I am looking for a way to export my html table to a CSV file. I have already found a solution, unfortunately it seems to work only with static content. Does anyone know a way to export the table filled with user input?

I post the code below. I also made a fiddle 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

Try using Data Tables Jquery library. They have given very good documentation of everything related to it. You can export your html table to CSV, PDF, etc. and many more formats.