Exporter au format CSV en utilisant jQuery et html

J’ai des données tabulaires que je dois exporter vers csv sans utiliser aucun plugin externe ou API. J’ai utilisé la méthode window.open passant les types mime mais j’ai rencontré des problèmes comme ci-dessous:

Comment déterminer si Microsoft Excel ou Open Office est installé sur le système à l’aide de jquery

Le code doit être indépendant du fait que ce qui est installé sur le système, à savoir openoffice ou ms, excelle. Je crois que le format CSV est le format que l’on peut attendre des deux éditeurs.

CODE

      $(document).ready(function(){ $("#btnExport").click(function(e) { var msg = GetMimeTypes(); //OpenOffice window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html()); //MS-Excel window.open('data:application/vnd.ms-excel,' + $('#dvData').html()); //CSV window.open('data:application/csv,charset=utf-8,' + $('#dvData').html()); e.preventDefault(); }); }); function GetMimeTypes () { var message = ""; // Internet Explorer supports the mimeTypes collection, but it is always empty if (navigator.mimeTypes && navigator.mimeTypes.length > 0) { var mimes = navigator.mimeTypes; for (var i=0; i < mimes.length; i++) { message += "" + mimes[i].type + " : " + mimes[i].description + "
"; } } else { message = "Your browser does not support this "; //sorry! } return ( message); }
Column One Column Two Column Three
row1 Col1 row1 Col2 row1 Col3
row2 Col1 row2 Col2 row2 Col3
row3 Col1 row3 Col2 row3 Col3

Les erreurs:

CSV: non reconnu sur les navigateurs

ODS & Excel: fonctionne mais je ne suis pas en mesure de trouver celui à générer lorsque le système a installé Excel ou OpenOffice?

IE version 8: ça ne marche pas du tout, s’ouvre dans une nouvelle fenêtre et comme ci-dessous la capture d’écran.

entrer la description de l'image ici

Démo

Voir ci-dessous pour une explication.

 $(document).ready(function() { function exportTableToCSV($table, filename) { var $rows = $table.find('tr:has(td)'), // Temporary delimiter characters unlikely to be typed by keyboard // This is to avoid accidentally splitting the actual contents tmpColDelim = Ssortingng.fromCharCode(11), // vertical tab character tmpRowDelim = Ssortingng.fromCharCode(0), // null character // actual delimiter characters for CSV format colDelim = '","', rowDelim = '"\r\n"', // Grab text from table into CSV formatted ssortingng csv = '"' + $rows.map(function(i, row) { var $row = $(row), $cols = $row.find('td'); 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) + '"'; // Deliberate 'false', see comment below if (false && window.navigator.msSaveBlob) { var blob = new Blob([decodeURIComponent(csv)], { type: 'text/csv;charset=utf8' }); // Crashes in IE 10, IE 11 and Microsoft Edge // See MS Edge Issue #10396033 // Hence, the deliberate 'false' // This is here just for completeness // Remove the 'false' at your own risk window.navigator.msSaveBlob(blob, filename); } else if (window.Blob && window.URL) { // HTML5 Blob var blob = new Blob([csv], { type: 'text/csv;charset=utf-8' }); var csvUrl = URL.createObjectURL(blob); $(this) .attr({ 'download': filename, 'href': csvUrl }); } else { // Data URI var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); $(this) .attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); } } // This must be a hyperlink $(".export").on('click', function(event) { // CSV var args = [$('#dvData>table'), 'export.csv']; exportTableToCSV.apply(this, args); // If CSV, don't do event.preventDefault() or return false // We actually need this to be a typical hyperlink }); }); 
 a.export, a.export:visited { display: inline-block; text-decoration: none; color: #000; background-color: #ddd; border: 1px solid #ccc; padding: 8px; } 
  Export Table data into Excel 
Column One Column Two Column Three
row1 Col1 row1 Col2 row1 Col3
row2 Col1 row2 Col2 row2 Col3
row3 Col1 row3 Col2 row3 Col3
row4 'Col1' row4 'Col2' row4 'Col3'
row5 "Col1" row5 "Col2" row5 "Col3"
row6 "Col1" row6 "Col2" row6 "Col3"

Je ne suis pas sûr si le code de génération CSV ci-dessus est si grand qu’il apparaît pour sauter les cellules et ne semble pas non plus permettre les virgules dans la valeur. Voici donc mon code de génération CSV qui pourrait être utile.

Il suppose que vous avez la variable $table qui est un object jQuery (par exemple, var $table = $('#yourtable'); )

 $rows = $table.find('tr'); var csvData = ""; for(var i=0;i<$rows.length;i++){ var $cells = $($rows[i]).children('th,td'); //header or content cells for(var y=0;y<$cells.length;y++){ if(y>0){ csvData += ","; } var txt = ($($cells[y]).text()).toSsortingng().sortingm(); if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0){ txt = "\"" + txt.replace(/\"/g, "\"\"") + "\""; } csvData += txt; } csvData += '\n'; } 

Une petite mise à jour pour la réponse de @Terry Young , c.-à-d. Ajouter le support IE 10+

 if (window.navigator.msSaveOrOpenBlob) { // IE 10+ var blob = new Blob([decodeURIComponent(encodeURI(csvSsortingng))], { type: 'text/csv;charset=' + document.characterSet }); window.navigator.msSaveBlob(blob, filename); } else { // actual real browsers //Data URI csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvData); $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); } 

Que se passe-t-il si vous avez vos données au format CSV et que vous les convertissez en HTML pour les afficher sur la page Web? Vous pouvez utiliser le http://code.google.com/p/js-tables/ plugin. Vérifiez cet exemple http://code.google.com/p/js-tables/wiki/Table Comme vous utilisez déjà la bibliothèque jQuery, je suppose que vous êtes en mesure d’append d’autres bibliothèques de toolkit javascript.

Si les données sont au format CSV, vous devriez pouvoir utiliser le type MIME générique “application / octetstream”. Tous les 3 types MIME que vous avez essayés dépendent du logiciel installé sur l’ordinateur du client.

D’après ce que j’ai compris, vous avez vos données sur une table et vous souhaitez créer le fichier CSV à partir de ces données. Cependant, vous avez du mal à créer le fichier CSV.

Mes pensées seraient d’itérer et d’parsingr le contenu de la table et de générer une chaîne à partir des données analysées. Vous pouvez vérifier comment convertir JSON au format CSV et stocker une variable pour un exemple. Vous utilisez jQuery dans votre exemple pour ne pas compter comme un plug-in externe. Ensuite, il vous suffit de servir la chaîne résultante en utilisant window.open et d’utiliser application/octetstream comme suggéré.

   Click Here To Download Below Report  
Name Date Speed Column2 Interface Interface2 Sub COmpany result company2 Gen
hello 100 200 300 html2svc ajax 200 7 8 9
hello 100 200 300 html2svc ajax 200 7 8 9

  $(document).ready(function () { Html2CSV('testbed_results', 'myfilename','export'); }); function Html2CSV(tableId, filename,alinkButtonId) { var array = []; var headers = []; var arrayItem = []; var csvData = new Array(); $('#' + tableId + ' th').each(function (index, item) { headers[index] = '"' + $(item).html() + '"'; }); csvData.push(headers); $('#' + tableId + ' tr').has('td').each(function () { $('td', $(this)).each(function (index, item) { arrayItem[index] = '"' + $(item).html() + '"'; }); array.push(arrayItem); csvData.push(arrayItem); }); var fileName = filename + '.csv'; var buffer = csvData.join("\n"); var blob = new Blob([buffer], { "type": "text/csv;charset=utf8;" }); var link = document.getElementById(alinkButton); if (link.download !== undefined) { // feature detection // Browsers that support HTML5 download atsortingbute link.setAtsortingbute("href", window.URL.createObjectURL(blob)); link.setAtsortingbute("download", fileName); } else if (navigator.msSaveBlob) { // IE 10+ link.setAtsortingbute("href", "#"); link.addEventListener("click", function (event) { navigator.msSaveBlob(blob, fileName); }, false); } else { // it needs to implement server side export link.setAtsortingbute("href", "http://www.example.com/export"); } }