web-dev-qa-db-fra.com

Comment exporter des données de table html sous forme de fichier .csv?

J'ai un tableau de données dans un tableau HTML sur un site Web et j'ai besoin de savoir comment exporter ces données au format .csv.

Comment cela serait-il fait?

htmlparsingcsvexportexport-to-csv
36
fmz

Pour exporter du code HTML au format csv, essayez de suivre cet exemple. Plus de détails et d’exemples sont disponibles à l’adresse suivante:  site de l'auteur.

Créez un fichier html2csv.js et mettez-y le code suivant. 

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;
    }
};

inclure les fichiers js dans la page html comme ceci:

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

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

TABLE:

<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>

BOUTON D'EXPORTATION:

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

J'ai pu utiliser la réponse décrite ci-dessous: Exporter au format CSV en utilisant jQuery et html et ajouté dans une modification pour le faire fonctionner dans IE et une autre modification mentionnée dans les commentaires pour récupérer le fil du tableau .

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
});

Avec mon lien qui ressemble à ça ...

<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

Voici un exemple très rapide de 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

Merci à gene tsai, voici quelques modifications de son code à exécuter sur ma page cible:

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")

améliorations:

  • Utiliser une boucle JavaScript générique for
  • assurez-vous que chaque cellule n'a pas de virgule
2
Roozbeh Zabihollahi

Vous pouvez utiliser une extension pour Chrome, qui fonctionne bien les fois où je l’ai essayée.

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

Une fois installé et sur n'importe quelle page Web comportant un tableau, si vous cliquez sur l'icône de cette extension, tous les tableaux de la page apparaissent en surbrillance au fur et à mesure que vous survolez les tableaux énumérés. un Google Doc. 

Cela fonctionne parfaitement pour ce dont j'ai besoin, à savoir la conversion occasionnelle de données tabulaires Web dans un tableur avec lequel je peux travailler.

1
Jasper Lawrence

J'ai brièvement décrit un moyen simple de le faire avec Google Spreadsheets (importHTML) et en Python (Pandas read_html et to_csv), ainsi qu'un exemple de script Python dans ma réponse SO ici: https: // stackoverflow .com/a/28083469/1588795 .

0
n8henrie

Si cela est peu fréquent, essayez l’un des nombreux addons firefox qui facilitent la copie des données de tableau HTML dans le presse-papiers (par exemple, https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/ ). Par exemple, pour l'add-on 'table2clipboard':

  1. installer l'add-on dans firefox
  2. ouvrez la page Web (avec la table) dans firefox
  3. faites un clic droit n'importe où dans la table et sélectionnez "copier la table entière"
  4. démarrer un tableur tel que LibreOffice Calc
  5. coller dans la feuille de calcul (sélectionner le caractère de séparation approprié selon les besoins)
  6. enregistrer/exporter la feuille de calcul au format CSV.
0
dat