Exporter au format csv en jQuery

Je suis de la génération dynamique d'un div qui est comme :

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

Et il y a beaucoup plus d'éléments sur la page.
Maintenant, comment puis-je obtenir un fichier csv comme ceci :

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

à l'aide de jQuery ?

besoin d'un fichier enregistrer dailog boîte de trop,comme ceci :

Exporter au format csv en jQuery

Grâce.

  • À la recherche pour le côté client de la solution & nécessité d'éviter un appel de serveur
  • excel peut effectivement importer au format html que vous l'avez
  • Plusieurs bibliothèques JavaScript va le faire, y compris Table
  • Serait "copier le tableau dans le presse-papiers au format CSV" être une option? Si oui, alors vous pouvez utiliser du javascript/jQuery pour recueillir les données à partir de votre table & format CSV (dans votre cas), puis utiliser les ZeroClipboard bibliothèque js pour copier les données mises en forme dans le presse-papiers (ce plugin est utilisé par github & d'autres de renommée sites web).
  • Exemple pour un "copier le tableau dans le presse-papiers au format CSV" jsfiddle.net/h2Kq6/
InformationsquelleAutor Pratik | 2011-01-09
  1. 96

    Vous pouvez le faire dans le côté client seulement, dans le navigateur qui acceptent Les Données Uri:

    data:application/csv;charset=utf-8,content_encoded_as_url

    Dans votre exemple, les Données de l'URI doit être:

    data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

    Vous pouvez appeler cette URI par:

    • à l'aide de window.open
    • ou de réglage de la window.location
    • ou par le href d'un point d'ancrage
    • par l'ajout du téléchargement de l'attribut ' il fonctionne dans chrome, reste à tester sous IE.

    Pour tester, il suffit de copier les Uri ci-dessus et collez-le dans votre barre d'adresse du navigateur. Ou test de l'ancre ci-dessous dans une page HTML:

    <a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

    À la création du contenu, d'obtenir les valeurs de la table, vous pouvez utiliser table2CSV et à faire:

    var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

    La plupart, si pas tous, les versions d'IE ne prennent pas en charge la navigation à une liaison de données, donc un hack doit être mis en œuvre, souvent avec un iframe. À l'aide d'un iFrame combiné avec document.execCommand('enregistrer sous'..), vous pouvez obtenir un comportement similaire sur les plus utilisées actuellement les versions de IE.

    • Les navigateurs qui fait ce travail / non travail pour? Il ne semble pas fonctionner dans le navigateur Chrome.
    • Les données Uri sont pris en charge par Chrome. Regardez: en.wikipedia.org/wiki/Data_URI#Web_browser_support
    • Donc, dit-il, mais je l'ai testé votre réponse et ça ne fonctionne pas sur IE9 ou Chrome pour moi.
    • Muhd, je ne sais pas ce qui s'est passé, mais je l'ai testé aujourd'hui de nouveau, et il fonctionne sur Chrome et pas sous IE!!! Je ne sais pas ce qui s'est passé, mais peut-être que c'est quelque chose lié à des types mime traités par les navigateurs ou systèmes d'exploitation. S'il vous plaît, si quelqu'un a des conseils à ce sujet, laissez-nous savoir.
    • quand je fais cela par window.location ou window.open il s'enregistre comme "x4ef3.le cadre", et non "abc.csv". Comment puis-je faire enregistrer en tant que ".csv" un fichier?
    • Malheureusement, ce comportement est un navigateur spécifique. Et autant que je sache, il n'y a aucun moyen de définir le nom de fichier à l'aide de la fenêtre.l'emplacement ou de la fenêtre.ouvrir dans n'importe quel navigateur.
    • Testé sur Firefox 23 et Chrome 28 et il fonctionne. Ne pouvait pas tester sur IE11.
    • Cela ne fonctionne pas dans tout IE 11. 🙁 caniuse.com/#feat=download
    • Juste le "download" de param ne fonctionne pas, droite? Il affecte uniquement le nom de fichier, mais le dialogue d'enregistrement sera déclenché.
    • À l'aide de données":" pour intégrer des ressources peuvent travailler. Mais j'ai été à essayer de comprendre comment obtenir de l'IE pour déclencher une boîte de dialogue enregistrer avec des "data:" tous les jours, sans succès 🙁
    • IE9 ne prend pas en charge le protocole de données. Seulement IE10 et au-dessus
    • corrigez-moi si je me trompe, mais l'uri de la méthode d'encodage fonctionne uniquement pour les petits csv contenu. vous ne pouvez pas utiliser cette méthode pour un grand csv cordes.
    • RFC2397 ne limite pas les données dans la taille, mais il avertit que The "data:" URL scheme is only useful for short values. Note that some applications that use URLs may impose a length limit; for example, URLs embedded within <A> anchors in HTML have a length limit determined by the SGML declaration for HTML [RFC1866]. (...). De plus, j'ai lu que IE8 limites des Données les Uri à 32 ko pour la sécurité. Mais IE9 ne fonctionne pas. Ainsi, il semble exister une application imposition et ne fonctionne pas la même dans tous les navigateurs.
    • merci beaucoup pour vos précisions. La raison que j'ai mentionné que c'était parce qu'il m'a donné une erreur lorsque j'ai essayé d'utiliser la méthode pour une très grande chaîne. EncodeURI n'ai pas de problème mais en essayant de lancer le fichier m'a donné une erreur en disant que c'était trop long. C'est sur Chrome. J'ai eu recours à l'aide de la deuxième option, toujours utiliser l'encodage de la fonction et de toutes les bonnes.
    • Les données URI est pris en charge par tous les principaux navigateurs, bien que IE Bord et d'offrir uniquement une prise en charge partielle: caniuse.com/#feat=datauri
    • URL tabletoCsv pas de travail aimablement mise à jour

    InformationsquelleAutor Italo Borssatto
  2. 25

    C'est ma mise en œuvre (base: https://gist.github.com/3782074):

    Utilisation:
    HTML:

    <table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

    JS:

    $("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

    Code:

    jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.push('"' + tmpStr + '"');
                  }
             });
          csvData.push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

    Notes:

    • Il utilise des "th" des balises pour les titres. Si ils ne sont pas présents, ils ne sont pas
      ajouté.
    • Ce code détecte les chiffres dans le format: -####.## (Vous aurez besoin de modifier le code afin d'accepter d'autres formats, par exemple, à l'aide des virgules).

    Mise à JOUR:

    Mon précédent de mise en œuvre a bien fonctionné, mais il n'a pas mis le nom de fichier csv. Le code a été modifié pour utiliser un nom de fichier, mais il demande un < a > élément. Il semble que vous ne pouvez pas générer dynamiquement le < a > élément feu et l'événement "click" (peut-être des raisons de sécurité?).

    DÉMO

    http://jsfiddle.net/nLj74t0f/

    (Malheureusement jsfiddle ne parvient pas à générer le fichier et renvoie une erreur: "veuillez utiliser la demande POST', ne laissez pas cette erreur qui vous empêche de tester ce code dans votre application).

    InformationsquelleAutor lepe
  3. 6

    J'ai récemment posté une bibliothèque logicielle libre pour cette: "html5csv.js" -- GitHub

    Il est destiné à vous aider à simplifier la création de petites simulateur apps
    en Javascript qui pourrait avoir besoin d'importer ou d'exporter des fichiers csv, de manipuler, d'afficher, de modifier
    les données, effectuer diverses procédures mathématiques comme montage, etc.

    Après le chargement "html5csv.js" le problème de la numérisation d'un tableau et la création d'un fichier CSV est un one-liner:

    CSV.begin('#PrintDiv').download('MyData.csv').go();

    Ici est un JSFiddle démonstration de votre exemple avec ce code.

    En interne, pour Firefox/Chrome c'est une base de données d'URL orientée solution, similaire à celui proposé par @italo, @lepe, et @adeneo (sur une autre question). Pour IE

    La CSV.begin() appel configure le système pour lire les données dans un tableau interne. Cette extraction se produit alors. Puis le .download() génère de données à l'URL d'un lien interne et de clics avec un lien-clicker. Celui-ci pousse un fichier à l'utilisateur final.

    Selon caniuse IE10 ne prend pas en charge <a download=...>. Donc, pour IE ma bibliothèque appels navigator.msSaveBlob() en interne, comme suggéré par @Manu Sharma

    • Il ne fonctionne pas sur IE9
    • elle aussi ne fonctionne pas dans IE11
    • Quoi à ce sujet? stackoverflow.com/a/27699027/103081
    • J'ai incorporé la technique dans le lien ci-dessus et peut confirmer la html5csv bibliothèque génère des fichiers csv dans IE11.
    InformationsquelleAutor Paul
  4. 5

    Voici deux SOLUTIONS de contournement pour le problème de déclenchement de téléchargements à partir du client seulement. Plus tard, des navigateurs, vous devriez regarder "blob"

    1. Faites glisser et déposez le tableau

    Saviez-vous que vous pouvez simplement faire GLISSER votre tableau dans excel?

    Ici est de savoir comment choisir la table de couper et coller ou glisser

    Sélectionnez une table complète avec le Javascript (pour être copié dans le presse-papiers)

    2. créer un popup page à partir de votre div

    Bien qu'il pas produire une boîte de dialogue enregistrer, si le résultant popup est enregistré avec l'extension .csv, il sera traité correctement par Excel.

    La chaîne pourrait être

    w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");

    par exemple, délimité par des tabulations avec un saut de ligne pour les lignes.

    Il y a des plugins qui vont créer la chaîne pour vous - comme http://plugins.jquery.com/project/table2csv

    var w = window.open('','csvWindow'); //popup, may be blocked though
//the following line does not actually do anything interesting with the 
//parameter given in current browsers, but really should have. 
//Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); //the csv string from for example a jquery plugin
w.document.close();

    AVERTISSEMENT: ce sont des solutions de contournement, et ne répond pas entièrement à la question qui est actuellement a la réponse pour la plupart des navigateurs: pas possible sur le client seulement

    • Et encore un non commenté en bas de vote. Inutile geste sauf si vous en commentaire!
    • une fois que vous avez vos données au format CSV, vous pouvez créer a avec download="myfile.csv" et type="text/csv" attributs, de coder les données au format CSV, en base64 à l'aide de btoa et définir la src attribut "data:text/csv;base64,P2ZyB4bW.....xucz0===", ajouter le a élément du DOM (cacher) et cliquez dessus, il va télécharger le fichier.
    • Oui, je sais, a répondu dans une autre réponse sur cette page.
    InformationsquelleAutor mplungjan
  5. 4

    En utilisant jQuery, vous ne pouvez pas éviter d'appel de serveur.

    Cependant, pour parvenir à ce résultat, je suis en utilisant Downloadify, ce qui me permet d'enregistrer des fichiers sans avoir à faire un autre appel de serveur. Faire cela réduit la charge du serveur et fait une bonne expérience utilisateur.

    Pour obtenir un bon CSV vous avez juste à prendre toutes les balises inutiles et de mettre un ',' entre les données.

    • cette chose aura besoin de Flash, donc il ne sera pas portable pour tous les navigateurs, vérifiez la réponse ci-dessous avec les données:application alimenté HREFs. Simple, propre.
    • En plus exigeant Flash, cette solution ne répond pas à la question exigences: utiliser jQuery et en évitant d'appel de serveur.
    • Bien, Pratique, a déclaré côté client et d'éviter d'appel de serveur. La portabilité n'est pas toujours question. Si elle correspond à ses besoins, pourquoi pas.
    • Flash est client de la taxation et à la réduction de support pour flash à travers les dispositifs, il est sérieusement pas recommandé.
    • Envisager de lire les autres réponses, sont mieux que celui-ci.
    InformationsquelleAutor DKSan
  6. 1

    Vous ne pouvez pas éviter un appel de serveur ici, JavaScript ne peut tout simplement pas (pour des raisons de sécurité) d'enregistrer un fichier pour le fichier de l'utilisateur du système. Vous devrez fournir vos données sur le serveur et d'avoir il envoyer le .csv comme un lien ou une pièce jointe directement.

    HTML5 a certains capacité de le faire (si l'enregistrement n'est vraiment pas spécifié - juste un cas d'utilisation, vous pouvez lire le fichier si vous voulez), mais il n'y a pas de solution de navigateur en place maintenant.

    • vous pouvez éviter un appel de serveur. d'où la upvotes pour les italo-réponse.
    • C'est tout à fait incorrect pour les navigateurs modernes
    InformationsquelleAutor Nick Craver
  7. 0

    Juste essayer le codage suivant...très simple pour générer CSV avec les valeurs des Tableaux HTML. Pas de problèmes de navigateur viendra

    <!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        
        <script src="http://www.csvscript.com/dev/html5csv.js"></script>
<script>
$(document).ready(function() {

 $('table').each(function() {
    var $table = $(this);

    var $button = $("<button type='button'>");
    $button.text("Export to CSV");
    $button.insertAfter($table);

    $button.click(function() {     
         CSV.begin('table').download('Export.csv').go();
    });
  });  
})

</script>
    </head>
<body>
<div id='PrintDiv'>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>
</div>
</body>
</html>
    InformationsquelleAutor ManiMaran A