Экспорт таблицы HTML с пользовательским вводом в CSV через JavaScript - PullRequest
Новая
       12

Экспорт таблицы HTML с пользовательским вводом в CSV через JavaScript

0 голосов
/ 18 сентября 2018

Я ищу способ экспортировать мою 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>

1 Ответ

0 голосов
/ 18 сентября 2018

Попробуйте использовать Таблицы данных Библиотека Jquery.Они дали очень хорошую документацию обо всем, что с этим связано.Вы можете экспортировать свою HTML-таблицу в CSV, PDF и т. Д. И во многие другие форматы.

...