2013-04-18 11 views
62

Ich habe eine tabellarische Daten, die ich in CSV exportieren muss, ohne ein externes Plugin oder API zu verwenden. Ich benutzte die window.open Methode die Typen Pantomime durchzulassen, aber konfrontiert Themen wie unten:Export in CSV mit jQuery und html

How to determine whether Microsoft Excel or Open Office is installed on the system using jquery

Der Code sollte der Tatsache, unabhängig sein, was auf dem System installiert wird, das heißt, Open Office oder MS Excel. Ich glaube, CSV ist das Format, das in beiden Editoren erwartet werden kann.

CODE

<html> 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script type="text/JavaScript"> 
$(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 += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />"; 
     } 
    } 
    else { 
     message = "Your browser does not support this "; 
     //sorry! 
    } 

    return (message); 
} 
</script> 

</head> 
<body> 
<div id="dvData"> 
<table> 
    <tr> 
     <th>Column One </th> 
     <th>Column Two</th> 
     <th>Column Three</th> 
    </tr> 
    <tr> 
     <td>row1 Col1</td> 
     <td>row1 Col2</td> 
     <td>row1 Col3</td> 
    </tr> 
    <tr> 
     <td>row2 Col1</td> 
     <td>row2 Col2</td> 
     <td>row2 Col3</td> 
    </tr> 
     <tr> 
     <td>row3 Col1</td> 
     <td>row3 Col2</td> 
     <td>row3 Col3</td> 
    </tr> 
</table> 
</div> 
<br/> 
<input type="button" id="btnExport" value=" Export Table data into Excel " /> 

</body> 

Fehler:

CSV: Unerkannte über den Browser

ODS & Excel: funktioniert, aber ich bin nicht finden können, die man zu generieren, wenn ein Excel installiert oder Openoffice installiert ist?

IE Version 8: es funktioniert überhaupt nicht, öffnet in einem neuen Fenster und wie unten Screenshot.

enter image description here

+0

Mit welchem ​​Problem sind Sie genau konfrontiert? Ich verstehe nicht. –

+0

ich bin nicht in der Lage, es zu csv mit jquery und html zu exportieren ... Ich möchte kein Plugin dafür verwenden .. Ich benutzte Mime-Typ, aber es scheint nicht zu funktionieren – GOK

+0

Dann zeigen Sie etwas Code und beschreiben, was genau nicht Arbeit wie? Welche Fehlermeldungen erhalten Sie? Etc. –

Antwort

103

Hier ist die Demo zuerst, dann Erklärungen danach:

$(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 = 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'); 
 

 
     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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="export">Export Table data into Excel</a> 
 
<div id="dvData"> 
 
    <table> 
 
    <tr> 
 
     <th>Column One</th> 
 
     <th>Column Two</th> 
 
     <th>Column Three</th> 
 
    </tr> 
 
    <tr> 
 
     <td>row1 Col1</td> 
 
     <td>row1 Col2</td> 
 
     <td>row1 Col3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row2 Col1</td> 
 
     <td>row2 Col2</td> 
 
     <td>row2 Col3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row3 Col1</td> 
 
     <td>row3 Col2</td> 
 
     <td>row3 Col3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row4 'Col1'</td> 
 
     <td>row4 'Col2'</td> 
 
     <td>row4 'Col3'</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row5 &quot;Col1&quot;</td> 
 
     <td>row5 &quot;Col2&quot;</td> 
 
     <td>row5 &quot;Col3&quot;</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row6 "Col1"</td> 
 
     <td>row6 "Col2"</td> 
 
     <td>row6 "Col3"</td> 
 
    </tr> 
 
    </table> 
 
</div>


Updates seit 2017

Hinzugefügt Verwendung von HTML5 Blob und URL als bevorzugte Methode und Verwendung von Data URI als Fallback.

Ich sehe andere Antworten darauf hindeutet, window.navigator.msSaveBlob

Ich bin aber immer noch zögern, meinen Code zu aktualisieren Unterstützung für sie zu schreiben, einfach weil es Abstürze in IE10 auf Windows 7 und IE11 auf 10 Windows- (für mich am wenigsten). Es funktionierte tatsächlich in Microsoft Edge (aber ironisch crashed for another user: Microsoft Edge issue ticket #10396033).

Der einfache Aufruf in Microsoft Developer Tools/Console führt zum Absturz des Browsers. da meine erste Antwort

navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt"); 

Es ist 4 Jahre, 3 Versionen herauskommen (IE10, 11, Rand) und Microsoft verwalten alle von ihnen haben eine Funktion zum Absturz bringen sie (langsame Klatschen) erfunden

Also, ich bin nicht einschließlich das in der Lösung.

Aber ich füge diese Warnung hinzu: fügen Sie navigator.msSaveBlob Unterstützung auf eigene Gefahr hinzu.


Antwort seit 2013

Ich bin neugierig, warum Sie eine serverseitige Lösung für diese nicht umsetzen. Gibt es einen Grund?

Aber zum Spaß, hier ist mein Versuch auf einer Client-seitigen Lösung.

Das Dumping von HTML als Daten-URI funktioniert in diesem Fall nicht. Sie müssen zuerst den Tabelleninhalt in eine gültige CSV-formatierte Zeichenfolge konvertieren. (Dies ist eigentlich der leichtere Teil.)

Aber auch danach ist die nächste Herausforderung, wie man es herunterladen kann. Aus irgendeinem Grund konnte ich den window.open Ansatz nicht in Firefox arbeiten. Anstatt also ich einen anderen Ansatz verwendet: <a href="{Data URI here}">

Mit dem <a> Tag haben wir die Möglichkeit, ein Standard-Dateinamen mit dem download Attribute zuweisen, die zur Zeit nur möglich in Firefox und Google Chrome ist. Da es sich nur um ein Attribut handelt, wird es elegant abgebaut.


Hinweise

Tests

Browser ich getestet habe mit umfassen:

  • Firefox 20+, Win/Mac (Werke)
  • Google Chrome 26+, Win/Mac (arbeitet)
  • Safari 6, Mac (Dateiname Problem nicht gelöst, aber keine Javascript-Fehler erzeugt, Dateiinhalte sind intakt)
  • IE 9+ (schlägt fehl, ich muss mehr sagen)
+0

Es funktioniert ganz gut für meine Anforderung; nur für nimmt nicht die oder Header für die Tabelle in Betracht .. ist das absichtlich ... Was ist, wenn wir zwei Header mit Colspans haben; können wir damit umgehen? – GOK

+1

Dies funktioniert nicht auf IE .. :( – GOK

+3

Ja, wie ich das sehr deutlich in den Notes-Abschnitt angegeben haben. –

1

Was passiert, wenn Sie Ihre Daten im CSV-Format und konvertieren es für die Anzeige auf der Webseite in HTML? Sie können das http://code.google.com/p/js-tables/ Plugin verwenden. Überprüfen Sie dieses Beispiel http://code.google.com/p/js-tables/wiki/Table Da Sie bereits jQuery-Bibliothek verwenden, habe ich angenommen, dass Sie in der Lage sind, andere Javascript Toolkit-Bibliotheken hinzuzufügen.

Wenn die Daten im CSV-Format vorliegen, sollten Sie den generischen Mime-Typ "application/octetstream" verwenden können. Alle 3 MIME-Typen, die Sie ausprobiert haben, hängen von der auf dem Client-Computer installierten Software ab.

1

Von dem, was ich verstehe, haben Sie Ihre Daten in einer Tabelle und Sie möchten die CSV aus diesen Daten erstellen. Sie haben jedoch Probleme beim Erstellen der CSV.

Meine Gedanken wäre, den Inhalt der Tabelle zu iterieren und zu analysieren und eine Zeichenfolge aus den analysierten Daten zu generieren. Sie können How to convert JSON to CSV format and store in a variable für ein Beispiel überprüfen. Sie verwenden jQuery in Ihrem Beispiel, so dass es nicht als externes Plugin zählt. Dann müssen Sie nur die resultierende Zeichenfolge mit window.open bedienen und application/octetstream wie vorgeschlagen verwenden.

7

Ich bin mir nicht sicher, ob der oben genannte CSV-Generierungscode so groß ist, als ob er th Zellen überspringt und auch nicht scheint, Kommas in dem Wert zuzulassen. Hier ist mein CSV-Generierungscode, der nützlich sein könnte.

Es übernimmt Sie haben die $table Variable, die ein jQuery-Objekt (zB. 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()).toString().trim(); 
        if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0){ 
         txt = "\"" + txt.replace(/\"/g, "\"\"") + "\""; 
        } 
        csvData += txt; 
       } 
       csvData += '\n'; 
} 
-1
<a id="export" role='button'> 
     Click Here To Download Below Report 
    </a> 
    <table id="testbed_results" style="table-layout:fixed"> 
     <thead> 
      <tr width="100%" style="color:white" bgcolor="#3195A9" id="tblHeader"> 
       <th>Name</th> 
       <th>Date</th> 
       <th>Speed</th> 
       <th>Column2</th> 
       <th>Interface</th> 
       <th>Interface2</th> 
       <th>Sub</th> 
       <th>COmpany result</th> 
       <th>company2</th> 
       <th>Gen</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="samplerow"> 
       <td>hello</td> 
       <td>100</td> 
       <td>200</td> 
       <td>300</td> 
       <td>html2svc</td> 
       <td>ajax</td> 
       <td>200</td> 
       <td>7</td> 
       <td>8</td> 
       <td>9</td> 
      </tr> 
      <tr> 
       <td>hello</td> 
       <td>100</td> 
       <td>200</td> 
       <td>300</td> 
       <td>html2svc</td> 
       <td>ajax</td> 
       <td>200</td> 
       <td>7</td> 
       <td>8</td> 
       <td>9</td> 
      </tr> 
     </tbody> 
    </table> 

$(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 attribute 
      link.setAttribute("href", window.URL.createObjectURL(blob)); 
      link.setAttribute("download", fileName); 
     } 
     else if (navigator.msSaveBlob) { // IE 10+ 
      link.setAttribute("href", "#"); 
      link.addEventListener("click", function (event) { 
       navigator.msSaveBlob(blob, fileName); 
      }, false); 
     } 
     else { 
      // it needs to implement server side export 
      link.setAttribute("href", "http://www.example.com/export"); 
     } 
    } 

</script> 
+2

Sie sollten hinzufügen etwas Text warum und wie dein Code das Problem löst – Reeno

2

Ein kleines Update für @Terry Junge Antwort, dh IE 10+ Unterstützung hinzufügen

if (window.navigator.msSaveOrOpenBlob) { 
    // IE 10+ 
    var blob = new Blob([decodeURIComponent(encodeURI(csvString))], { 
    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' 
    }); 
} 
+0

Wird dies für IE9 funktionieren, um HTML-Tabelle zu exportieren, wie 'type: 'data: application/vnd.ms-excel;''? Vielen Dank – Disera