Javascript: Download Daten in Datei vom Inhalt innerhalb der Seite

Einstellung ist die folgende: Ich habe eine Homepage, wo ich ein Diagramm anzeigen, das mit Komma getrennte Werte von innerhalb der Seite erstellt wurde. Ich möchte Benutzern die Möglichkeit geben, die Daten als cvs-Datei herunterzuladen, ohne den Server erneut zu kontaktieren. (da die Daten schon da sind) Ist das irgendwie möglich? Ich würde eine reine JavaScript-Lösung bevorzugen.Javascript: Download Daten in Datei vom Inhalt innerhalb der Seite

Bis jetzt habe ich entdeckt: http://pixelgraphics.us/downloadify/test.html, aber es beinhaltet Flash, die ich gerne vermeiden würde.

Ich kann mir nicht vorstellen, dass diese Frage nicht zuvor gestellt wurde. Es tut mir leid, den Beitrag zu verdoppeln, aber es scheint, dass ich die falschen Schlüsselwörter oder etwas verwendet habe - ich habe in diesen Foren keine Lösung gefunden.

Quelle

2010-11-15 Simon

aktualisieren:

Zeit ändert sicherlich Dinge ;-) Wenn ich diese Frage beantworten ersten IE8 der neueste IE-Browser dort zur Verfügung (Nov 2010) und so war es kein Cross-Browser-Weg dies zu tun, ohne eine Rundreise zum Server oder ein Tool, das Flash benötigt.

@Zectburno's answer bekommen Sie, was Sie jetzt brauchen, aber für den historischen Kontext beachten Sie, welche IE-Browser welche Funktion unterstützen.

btoa() in IE8 und IE9
Blob ist in IE10 +

Seien Sie sicher, dass in den Browsern zu testen, müssen Sie zur Unterstützung zur Verfügung. Obwohl das Blob-Beispiel in der anderen Antwort in IE10 + funktionieren sollte, funktioniert es nicht, wenn ich nur auf den Link klicke (Browser tut nichts, kein Fehler) ... nur wenn ich rechts klicke und das Ziel als "file.csv" speichere Navigieren Sie zu der Datei und doppelklicken Sie darauf, um die Datei zu öffnen.

Test both approaches (btoa/Blob) in this JSFiddle. (hier ist der Code)

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <a id="a" target="_blank">Download CSV (via btoa)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var a = document.getElementById("a"); 
    a.href = "data:text/csv;base64," + btoa(csv); 
    </script> 
    <hr/> 
    <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var data = new Blob([csv]); 
    var a2 = document.getElementById("a2"); 
    a2.href = URL.createObjectURL(data); 
    </script> 
</body> 
</html>

Original-Antwort:

Ich glaube nicht, gibt es eine Option für diese zur Verfügung steht.

Ich würde nur Ihren Code so anpassen, dass, wenn Flash 10+ erkannt wird (93% saturation as of September 2009) auf dem System des Benutzers, die Option Downloadify zur Verfügung stellen, andernfalls fallback auf eine serverseitige Anfrage.

Quelle

2010-11-15 13:57:54 scunliffe

aufgerufen werden kann, unterstützen dowloadify von Javascript? Es wäre schwierig, einen Flash-Button zu erstellen, der zu meinem Design passt. –

@ TomášZato ja kann es von JavaScript aufgerufen werden: https://github.com/dcneiner/Downloadify – scunliffe

A nicht sehen, wie ist das eine Antwort auf meine Frage. Ich habe die "Dokumentation" gelesen, aber meine Frage war, ob der Download von Javascript ausgelöst werden kann. Das ist leider [unmöglich] (https://github.com/dcneiner/Downloadify/issues/20) - die Schaltfläche Herunterladen muss angeklickt werden. –

Soweit ich weiß, ist das nicht möglich: Deshalb wurde Downloadify erstellt.

Sie könnten versuchen, eine Verbindung zu einem data:URL mit CSV-Daten herzustellen, aber es wird browserübergreifende Probleme geben.

Quelle

2010-11-15 13:50:23

function export(exportAs) { 
    var csvText = tableRowsToCSV(this.headTable.rows); 
    csvText += tableRowsToCSV(this.bodyTable.rows); 
    //open the iframe doc for writing 
    var expIFrame; 
    if (strBrowser == "MSIE") expIFrame = document.exportiframe; 
    else expIFrame = window.framesexportiframe; 
    var doc = expIFrame.document; 
    doc.open('text/plain', 'replace'); 
    doc.charset = "utf-8"; 
    doc.write(csvText); 
    doc.close(); 
    var fileName = exportAs + ".txt"; 
    doc.execCommand("SaveAs", null, fileName); 
} 

function tableRowsToCSV(theRows) { 
    var csv = ""; 
    var csvRow = ""; 
    var theCells; 
    var cellData = ""; 
    for (var r = 0; r < theRows.length; r++) { 
     theCells = theRows.item(r).cells; 
     for (var c = 0; c < theCells.length; c++) { 
      cellData = ""; 
      cellData = theCells.item(c).innerText; 
      if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'"; 
      if (cellData != "") csvRow += "," + cellData; 
     } 
     if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length); 
     csv += csvRow + "\n"; 
     csvRow = ""; 
    } 
    return csv; 
}

fand ich diesen Code an anderer Stelle, here, vorher

Quelle

2010-11-15 14:39:42 Blowsie

expIFrame = window.framesexportiframe; // Es gibt keine framesexportiframe Eigenschaft im Fenster! –

Getestet auf Safari 5, Firefox 6, 12 Opera, Chrome 26.

<a id='a'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var a = document.getElementById('a'); 
    a.href='data:text/csv;base64,' + btoa(csv); 
</script>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var data = new Blob([csv]); 
    var a = document.getElementById('a'); 
    a.href = URL.createObjectURL(data); 
</script>

Quelle

2011-09-16 00:53:42 Zectbumo

Das ist was ich benutze, aber in Mozzila Firefox verursacht es schreckliche laggs für große Dateien (> 6MB). –

Wenn die URL zu groß ist, wird der Download in Chrome einfach fehlschlagen. –

Es wäre hilfreich zu hören, was Sie mit "zu groß" meinen. Wie viele MB möchten Sie herunterladen? Möglicherweise müssen Sie die HTML 5-Methode verwenden, da die ältere Methode je nach Browser nur ~ 4 KB verarbeiten kann. – Zectbumo

Wenn die Benutzer auf dem aktuellen Stand Browser haben, könnte das neue Blob-Objekt Ihnen helfen.

Am Beispiel hier https://developer.mozilla.org/en/docs/DOM/Blob ("Blob Konstruktor Beispiel usage"), können Sie so etwas wie das folgende tun könnte:

var typedArray = "123,abc,456"; //your csv as a string 
var blob = new Blob([typedArray], {type: "text/csv"}); 
var url = URL.createObjectURL(blob); 
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link 
a.href = url; 
a.download = "file.csv";

Quelle

2013-04-25 11:03:04

HTML:

<a href="javascript:onDownload();">Download</a>

JavaScript:

function onDownload() { 
    document.location = 'data:Application/octet-stream,' + 
         encodeURIComponent(dataToDownload); 
}

entnommen von How to Download Data as a File From JavaScript

Quelle

2013-06-19 05:42:12 Sneg

Dies ist eine einfache Lösung, aber wie in der ursprünglichen Quelle erwähnt, ist es noch nicht bekannt, der Download-Datei einen Namen zu geben. Wenn jemand die Lösung für dieses Problem kennt, würde es geschätzt werden. –

Einfache Lösung:

function download(content, filename, contentType) 
{ 
    if(!contentType) contentType = 'application/octet-stream'; 
     var a = document.createElement('a'); 
     var blob = new Blob([content], {'type':contentType}); 
     a.href = window.URL.createObjectURL(blob); 
     a.download = filename; 
     a.click(); 
}

Nutzungs

download("csv_data_here", "filename.csv", "text/csv");

Quelle

2013-10-07 17:06:19

"Anwendung/Oktett-Stream" war der Schlüssel für mich: +1: –

Die umfassendste Lösung, die ich über den Weg gelaufen sind FileSaver.js verwendet, viele potenzielle Cross-Browser-Probleme für Sie mit Fallbacks Handhabung.

Es nutzt die Blob Objekt wie andere Plakate getan haben, und der Schöpfer schafft sogar eine Blob.js polyfill falls Sie müssen Browser-Versionen unterstützen, die nicht Blob

Quelle

2014-10-01 01:38:15

Javascript: Download Daten in Datei vom Inhalt innerhalb der Seite

Antwort

Verwandte Themen