it-swarm.com.de

Wie exportiere ich HTML-Tabellendaten als CSV-Datei?

Ich habe eine Tabelle mit Daten in einer HTML-Tabelle auf einer Website und muss wissen, wie diese Daten als CSV-Datei exportiert werden.

Wie würde das gemacht werden?

36
fmz

Versuchen Sie zum Exportieren von HTML nach CSV diesem Beispiel zu folgen. Weitere Details und Beispiele finden Sie im  Website des Autors.

Erstellen Sie eine Datei html2csv.js, und fügen Sie den folgenden Code hinzu. 

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

fügen Sie die js-Dateien wie folgt in die HTML-Seite ein:

<script type="text/javascript" src="jquery-1.3.2.js" ></script>

<script type="text/javascript" src="html2CSV.js" ></script>

TABELLE:

<table id="example1" border="1"  style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3">

    <tr>

        <th>Title</th>

        <th>Name</th>

        <th>Phone</th>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>John</td>

        <td>07868785831</td>

    </tr>

    <tr>

        <td>Miss</td>

        <td><i>Linda</i></td>

        <td>0141-2244-5566</td>

    </tr>

    <tr>

        <td>Master</td>

        <td>Jack</td>

        <td>0142-1212-1234</td>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>Bush</td>

        <td>911-911-911</td>

    </tr>

</table>

EXPORT-TASTE:

<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV({header:['prefix','Employee Name','Contact']})">
24
AlphaMale

Ich konnte die hier umrissene Antwort verwenden: Mit jQuery und html nach CSV exportieren und in eine Modifikation eingefügt, damit sie in IE funktioniert, und eine weitere Modifikation, die in den Kommentaren erwähnt wird, um den Thead aus der Tabelle zu ziehen .

function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // Temporary delimiter characters unlikely to be typed by keyboard
        // This is to avoid accidentally splitting the actual contents
        tmpColDelim = String.fromCharCode(11), // vertical tab character
        tmpRowDelim = String.fromCharCode(0), // null character

        // actual delimiter characters for CSV format
        colDelim = '","',
        rowDelim = '"\r\n"',

        // Grab text from table into CSV formatted string
        csv = '"' + $rows.map(function (i, row) {
            var $row = $(row), $cols = $row.find('td,th');

            return $cols.map(function (j, col) {
                var $col = $(col), text = $col.text();

                return text.replace(/"/g, '""'); // escape double quotes

            }).get().join(tmpColDelim);

        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim) + '"',



        // Data URI
        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

        console.log(csv);

        if (window.navigator.msSaveBlob) { // IE 10+
            //alert('IE' + csv);
            window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
        } 
        else {
            $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); 
        }
}

// This must be a hyperlink
$("#xx").on('click', function (event) {

    exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
});

Wenn mein Link so aussieht ...

<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>

JsFiddle: https://jsfiddle.net/mnsinger/65hqxygo/

17
Michael Singer

Hier ist ein sehr schnelles Beispiel für CoffeeScript/jQuery

csv = []
for row in $('#sometable tr')
  csv.Push ("\"#{col.innerText}\"" for col in $(row).find('td,th')).join(',')
output = csv.join("\n")
4
gene tsai

Dank gene tsai sind hier einige Änderungen an seinem Code, die auf meiner Zielseite ausgeführt werden können:

csv = []
rows = $('#data tr');
for(i =0;i < rows.length;i++) {
    cells = $(rows[i]).find('td,th');
    csv_row = [];
    for (j=0;j<cells.length;j++) {
        txt = cells[j].innerText;
        csv_row.Push(txt.replace(",", "-"));
    }
    csv.Push(csv_row.join(","));
}
output = csv.join("\n")

verbesserungen:

  • Verwenden Sie die generische JavaScript-Variable for
  • stellen Sie sicher, dass jede Zelle kein Komma enthält
2

Sie könnten eine Erweiterung für Chrome verwenden, die gut funktioniert, wenn ich es ausprobiert habe.

https://chrome.google.com/webstore/search/html%20table%20to%20csv?_category=extensions

Wenn Sie auf einer Webseite mit einer Tabelle installiert sind und wenn Sie auf das Symbol dieser Erweiterung klicken, werden alle Tabellen auf der Seite angezeigt. Wenn Sie die Tabellen durchlaufen, werden diese hervorgehoben. Wenn Sie sie anklicken, können Sie sie in die Zwischenablage kopieren oder speichern ein Google Doc. 

Es funktioniert perfekt für das, was ich brauche, nämlich die gelegentliche Umwandlung webbasierter Tabellendaten in eine Tabellenkalkulation, mit der ich arbeiten kann.

1
Jasper Lawrence

Ich habe kurz einen einfachen Weg mit Google Spreadsheets (importHTML) und in Python (Pandas read_html und to_csv) sowie ein Beispiel-Python-Skript in meiner SO Antwort hier: https://stackoverflow.com/a/28083469/1588795 .

0
n8henrie

Wenn dies nur selten erforderlich ist, versuchen Sie es mit einem von mehreren Firefox-Addons, die das Kopieren von HTML-Tabellendaten in die Zwischenablage erleichtern (z. B. https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/ ). Zum Beispiel für das Add-On 'table2clipboard':

  1. installieren Sie das Add-On in Firefox
  2. Öffnen Sie die Webseite (mit der Tabelle) in Firefox
  3. klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle und wählen Sie "Ganze Tabelle kopieren".
  4. starten Sie eine Tabellenkalkulationsanwendung wie LibreOffice Calc
  5. einfügen in die Kalkulationstabelle (Wählen Sie nach Bedarf das entsprechende Trennzeichen).
  6. speichern/Exportieren der Tabelle als CSV.
0
dat