Gibt es eine Möglichkeit, eine Textdatei auf der Clientseite zu erstellen und den Benutzer zum Herunterladen aufzufordern, ohne mit dem Server zu interagieren? Ich weiß, dass ich nicht direkt auf ihren Computer schreiben kann (Sicherheit und alles), aber kann ich sie erstellen und zum Speichern auffordern?
javascript
file
web-applications
client-side
Joseph Silber
quelle
quelle
Antworten:
Sie können Daten-URIs verwenden. Die Browserunterstützung variiert. siehe Wikipedia . Beispiel:
Der Oktett-Stream soll eine Download-Eingabeaufforderung erzwingen. Andernfalls wird es wahrscheinlich im Browser geöffnet.
Für CSV können Sie Folgendes verwenden:
Probieren Sie die jsFiddle-Demo aus .
quelle
Einfache Lösung für HTML5-fähige Browser ...
Verwendungszweck
quelle
download
Attribut können Sie den Dateinamen angeben ;-)txt
Erweiterung nur an, wenn Sie im Dateinamen keine Erweiterung angeben . Wenn Sie dies tun, wirddownload("data.json", data)
es wie erwartet funktionieren.Alle oben genannten Lösungen funktionierten nicht in allen Browsern. Folgendes funktioniert schließlich unter IE 10+, Firefox und Chrome (und ohne jQuery oder eine andere Bibliothek):
Beachten Sie, dass Sie abhängig von Ihrer Situation möglicherweise auch URL.revokeObjectURL nach dem Entfernen aufrufen möchten
elem
. Gemäß den Dokumenten für URL.createObjectURL :quelle
Failed: network error
in Chrome. Dieser funktioniert gut.Das obige Beispiel funktioniert in Chrome und IE einwandfrei, schlägt jedoch in Firefox fehl. Bitte denken Sie daran, einen Anker an den Körper anzuhängen und ihn nach dem Klicken zu entfernen.
quelle
a.click()
Zeile wirft , weil er glaubt, dass die Blob-URL einen Kreuzursprung hat.Ich benutze gerne FileSaver.js . Die Kompatibilität ist ziemlich gut (IE10 + und alles andere) und es ist sehr einfach zu bedienen:
quelle
<a>
.Die folgende Methode funktioniert in IE11 +, Firefox 25+ und Chrome 30+:
Sehen Sie dies in Aktion: http://jsfiddle.net/Kg7eA/
Firefox und Chrome unterstützen Daten-URIs für die Navigation, mit denen wir Dateien erstellen können, indem wir zu einem Daten-URI navigieren, während der IE dies aus Sicherheitsgründen nicht unterstützt.
Auf der anderen Seite verfügt der IE über eine API zum Speichern eines Blobs, mit der Dateien erstellt und heruntergeladen werden können.
quelle
Diese Lösung wird direkt aus dem Github-Repository von tiddlywiki (tiddlywiki.com) extrahiert. Ich habe Tiddlywiki in fast allen Browsern verwendet und es funktioniert wie ein Zauber:
Github Repo: Spar-Modul herunterladen
quelle
Lösung, die auf IE10 funktioniert: (Ich brauchte eine CSV-Datei, aber es reicht aus, Typ und Dateiname in txt zu ändern.)
quelle
Wenn Sie nur eine Zeichenfolge konvertieren möchten, die zum Herunterladen verfügbar ist, können Sie dies mit jQuery versuchen.
quelle
Das Paket js-file-download von github.com/kennethjiang/js-file-download behandelt Randfälle für die Browserunterstützung:
Zeigen Sie die Quelle an, um zu sehen, wie die auf dieser Seite genannten Techniken verwendet werden.
Installation
Verwendungszweck
quelle
Wie bereits erwähnt, ist filesaver ein großartiges Paket, um mit Dateien auf der Clientseite zu arbeiten. Bei großen Dateien ist dies jedoch nicht gut. StreamSaver.js ist eine alternative Lösung (auf die in FileServer.js verwiesen wird), die große Dateien verarbeiten kann:
quelle
quelle
Ab April 2014 sind FileSytem-APIs in W3C möglicherweise nicht standardisiert. Jeder, der die Lösung mit Blob betrachtet, sollte mit Vorsicht fädeln, denke ich.
HTML5 rockt den Kopf hoch
W3C-Mailingliste auf der FileSytem-API
quelle
Basierend auf @ Rick Antwort, die wirklich hilfreich war.
Sie müssen die Zeichenfolge formen,
data
wenn Sie sie folgendermaßen freigeben möchten:`Entschuldigung, ich kann die Antwort von @ Rick aufgrund meines derzeit schlechten Rufs in StackOverflow nicht kommentieren.
Ein Bearbeitungsvorschlag wurde geteilt und abgelehnt.
quelle
Wir können die URL- API, insbesondere URL.createObjectURL () , und die Blob- API verwenden, um so ziemlich alles zu codieren und herunterzuladen.
Wenn Ihr Download klein ist, funktioniert dies einwandfrei:
Wenn Ihr Download sehr umfangreich ist, können Sie anstelle des DOM ein Linkelement mit den Downloadparametern erstellen und einen Klick auslösen.
Beachten Sie, dass das Linkelement nicht an das Dokument angehängt ist, der Klick jedoch trotzdem funktioniert! Auf diese Weise können Sie einen Download von vielen hundert Mo erstellen.
Bonus! Laden Sie alle zyklischen Objekte herunter und vermeiden Sie die Fehler:
Verwenden von https://github.com/douglascrockford/JSON-js/blob/master/cycle.js
In diesem Beispiel wird das
document
Objekt als json heruntergeladen .quelle
Sie können sogar eine bessere als nur URIs ausführen. Mit Chrome können Sie auch den Namen der Datei vorschlagen, wie in diesem Blogbeitrag über die Benennung eines Downloads bei Verwendung von URIs erläutert .
quelle
Diese Funktion funktioniert.
quelle
Die folgende Methode funktioniert in IE10 +, Edge, Opera, FF und Chrome:
Rufen Sie einfach die Funktion auf:
quelle
Für mich hat das perfekt funktioniert, mit dem gleichen Dateinamen und der gleichen Erweiterung, die heruntergeladen wurden
<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>
‚title‘ ist der Dateiname mit der Erweiterung das heißt
sample.pdf
,waterfall.jpg
etc ..'file64' ist der base64-Inhalt wie dieser, dh
Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO
quelle
Ich würde ein
<a></a>
Tag verwenden und dann das setzenhref='path'
. Platzieren Sie anschließend ein Bild zwischen den<a>
Elementen, damit ich es visuell sehen kann. Wenn Sie möchten, können Sie eine Funktion erstellen, die das ändert,href
sodass es nicht nur derselbe Link ist, sondern auch dynamisch.Geben Sie dem
<a>
Tag auch ein,id
wenn Sie mit Javascript darauf zugreifen möchten.Beginnend mit der HTML-Version:
Jetzt mit JavaScript:
quelle
Wenn die Datei Textdaten enthält, verwende ich eine Technik, die darin besteht, den Text in ein Textbereichselement einzufügen und ihn vom Benutzer auswählen zu lassen (in den Textbereich klicken und dann Strg-A drücken), dann zu kopieren und anschließend in einen Texteditor einzufügen.
quelle