So erstellen Sie eine Datei im Speicher für den Benutzer zum download, aber nicht über den server?
Gibt es eine Möglichkeit, kann ich eine text-Datei auf der client-Seite und der Benutzer aufgefordert, es herunterzuladen, ohne dass eine Interaktion mit dem server?
Ich weiß, ich kann nicht direkt schreiben, um Ihre Maschine (Sicherheit und so), aber kann ich erstellen und aufgefordert, es zu speichern?
- Siehe auch: JavaScript: Erstellen und speichern von Datei
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie Daten-URIs. Browser-Unterstützung variiert; siehe Wikipedia. Beispiel:
Die Oktett-stream ist die Kraft einer download-Aufforderung. Ansonsten wird es wahrscheinlich im browser geöffnet.
Für die CSV, die Sie verwenden können:
Versuchen die jsFiddle demo.
a
Elemente.<a>
Attributdownload="filename.txt"
- und javascript -.click()
können Sie den Prozess automatisieren.Einfache Lösung für HTML5-Browser bereit...
JS:
CSS:
HTML:
Nutzung
download
- Attribut können Sie angeben, Datei-Namen 😉txt
Erweiterung wenn Sie eine Erweiterung im Dateinamen. Wenn Siedownload("data.json", data)
dann funktioniert es wie erwartet.data:text/plain;base64
firefox nicht herunterladen.JSON.stringify(item, undefined, "\t").replace(/\n/g, "\r\n");
. Wenn ich den text drucken auf der Konsole, unmittelbar vor dem einsetzen in den Daten-uri, ich kann sehen, dass es enthält \r\n, aber wenn ich öffnen Sie die gespeicherte Datei diese vorbei sind. Ich denke, dass ich besser öffnen Sie eine eigene Frage.Alle oben genannten Lösungen nicht funktionieren in allen Browsern. Hier ist das, was schließlich funktioniert unter IE 10+, Firefox und Chrome (und ohne jQuery oder eine andere Bibliothek):
Beachten Sie, dass, je nach Ihrer situation, Sie können auch anrufen möchten URL.revokeObjectURL nach dem entfernen
elem
. Laut der docs für URL.createObjectURL:window.URL.revokeObjectURL(elem.href);
nach dem entfernenelem
auf Firefox 48 Ergebnisse in das download-Fenster nie erscheint und der download nie ab. Entfernen Sie den AufrufrevokeObjectURL()
löst dieses. Für AngularJS 1.x-apps, ich vermute, dass Sie können bauen ein array von Urls, die bereinigt werden auf zerstören des Reglers.encodeURI(content)
?Failed: network error
in Chrom. Dieses funktioniert gut.Alle oben genannten Beispiel funktioniert gut in chrome und IE, aber nicht in Firefox.
Bitte denken Sie anfügen, ein Anker, um den Körper und entfernen Sie es nach auf.
a.click()
Linie, weil es denkt, die blob-URL ist cross-origin.Ich bin gerne mit FileSaver.js. Die Kompatibilität ist ziemlich gut (IE10+ und alles andere), und es ist sehr einfach zu verwenden:
<a>
.<a download="...">
. Ich bin mir nicht sicher, ob/wie FileSaver.js unterstützt diese.Die folgende Methode funktioniert im IE11+, Firefox 25+ und Chrome 30+:
In Aktion sehen: http://jsfiddle.net/Kg7eA/
Firefox-und Chrome-support-Daten-URI für die navigation, die es uns ermöglicht, Dateien erstellen, indem Sie eine data-URI, während der IE es nicht unterstützt für Zwecke der Gefahrenabwehr.
Auf der anderen Seite, DH hat-API für das speichern eines blob, die verwendet werden können, zu erstellen und Dateien herunterladen.
Diese Lösung extrahiert wird direkt von tiddlywiki s (tiddlywiki.com) github-repository. Ich habe verwendet, tiddlywiki in fast allen Browsern und es funktioniert wie ein Charme:
Github-repo:
Download-Bildschirmschoner-Modul
Lösung, die Arbeit auf IE10:
(Ich habe eine csv-Datei, aber es ist genug, um zu ändern, den Typ und den Dateinamen in txt)
Wenn Sie wollen einfach nur konvertieren einen string zum download verfügbar sein, können Sie versuchen, diese mithilfe von jQuery.
Wie bereits erwähnt, filesaver ist ein großes Paket mit Dateien arbeiten, die auf der client-Seite. Aber, es ist nicht gut mit großen Dateien. StreamSaver.js ist eine alternative Lösung (die spitz in FileServer.js), das verarbeiten kann große Dateien:
Paket js-Datei-download von github.com/kennethjiang/js-file-download Griffe Sonderfälle für die browser-Unterstützung:
View source zu sehen, wie es verwendet Techniken, die auf dieser Seite erwähnt.
Installation
Nutzung
April 2014, Dateisystem-APIs möglicherweise nicht standardisierte W3C. Jeder Blick auf die Lösung mit blob-thread sollte mit Vorsicht, denke ich.
HTML5 rocks heads-up
W3C-Mailing-Liste auf Dateisystem-API
Basierend auf @Rick Antwort, die war wirklich hilfreich.
Müssen Sie stengel die Zeichenfolge
data
wenn Sie möchten, zu teilen, um es auf diese Weise:`
Sorry, ich kann nicht kommentieren, @Rick ' s Antwort wegen meiner aktuellen niedrigen Ruf bei StackOverflow.
Einer edit-Vorschlag wurde geteilt und abgelehnt.
Können Sie sogar noch besser als nur URI ' s - mit Chrome können Sie auch vorschlagen, der name der Datei wird, wie bereits in dieser blog-post über die Benennung eines download bei der Verwendung von URIs.
Diese unter Funktion gearbeitet.
Für mich perfekt funktioniert, mit dem gleichen Dateinamen und die Erweiterung immer heruntergeladen
<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>
'title' ist der name der Datei mit der extension habe ich.e
sample.pdf
,waterfall.jpg
usw..'file64' ist die base64 content so etwas wie dieses ich.e
Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO
Wenn die Datei text enthält, der Daten, eine Technik, die ich verwenden, ist der text in ein textarea-element und lassen Sie den Benutzer auswählen (klicken Sie in der textarea dann Strg-A) dann kopieren, gefolgt von einem einfügen in einen text-editor.
Es tatsächlich möglich IST - verwenden Sie Flash.
Können Sie entweder generieren die Inhalte mit JS und dann initialisieren Sie einige flash-vars oder einfach alles tun, was in einem flash-Film.
Bitte werfen Sie einen Blick auf diese für einige wichtige Bemerkungen.