Aber durch Browser eingeschränkt, können wir in vielen Fällen nur einen Link bereitstellen und den Benutzern die Möglichkeit geben, zum Öffnen -> Speichern unter zu klicken. Wie zum Beispiel der folgende Link:
Kopieren Sie den Codecode wie folgt:
<a href="file.js">file.js</a>
Wenn der Benutzer auf diesen Link klickt, öffnet sich der Browser und zeigt den Inhalt der Datei an, auf die der Link verweist. Dies entspricht offensichtlich nicht unseren Anforderungen. HTML5 fügt dem a-Tag ein Download-Attribut hinzu. Solange dieses Attribut vorhanden ist, öffnet der Browser beim Klicken auf den Link nicht die Datei, auf die der Link verweist, sondern lädt sie stattdessen herunter (derzeit nur von Chrome, Firefox und unterstützt). Oper).
Beim Herunterladen wird der Name des Links direkt als Dateiname verwendet, er kann jedoch geändert werden. Fügen Sie einfach den gewünschten Dateinamen zum Herunterladen hinzu, z. B. download="not-a-file.js".
Dies reicht jedoch nicht aus. Die obige Methode eignet sich nur für den Einsatz, wenn sich die Datei auf dem Server befindet. Was ist, wenn der Browser den von js generierten Inhalt auf der Browserseite herunterladen soll?
Tatsächlich gibt es immer noch eine Möglichkeit, dies zu tun. Viele Leute haben von dem Wort DataURI gehört. Das gebräuchlichere ist der src des Bildes, wie zum Beispiel:
Kopieren Sie den Codecode wie folgt:
<img src="data:image/gif;base64,R0lGOXXXXX">
Die Erklärung von DataURI kann hierher verschoben werden, ich werde sie hier nicht erklären.
Daher gibt es jetzt ein Gesetz, das beim Herunterladen von mit js generierten Inhalten befolgt werden muss. Eingekapselt in eine Methode wie folgt:
Kopieren Sie den Codecode wie folgt:
Funktion downloadFile(aLink, fileName, content){
aLink.download = Dateiname;
aLink.href = "data:text/plain," + content;
}
Nach dem Aufruf von downloadFile klickt der Benutzer auf den Link, um den Browser-Download auszulösen.
Dies reicht jedoch nicht aus. Die oben beschriebene Methode weist zwei Mängel auf, die zum Verlust vieler fauler Mädchen führen werden:
Es gibt Einschränkungen hinsichtlich der Dateitypen, die heruntergeladen werden können. Was muss ich tun, wenn ich die verarbeiteten Fotos herunterladen möchte?
Sie müssen zum Herunterladen erneut klicken, was zu mühsam ist.
Um das Dateitypproblem zu lösen, können Sie die neue API des Browsers (URL.createObjectURL) verwenden, um das Problem zu lösen. URL.createObjectURL wird normalerweise zum Erstellen des DataURI des Bildes zum Anzeigen des Bildes verwendet und lassen Sie den Browser uns beim Festlegen des Dateityps helfen.
Der Parameter von URL.createObjectURL ist ein File-Objekt oder ein Blob-Objekt. Das File-Objekt ist die über input[type=file] ausgewählte Datei. Eine detaillierte Beschreibung finden Sie hier.
Jetzt müssen wir nur noch eine ObjectURL mit Inhalt erstellen und sie aLink zuweisen, um das Problem der Dateitypbeschränkung zu lösen.
Das automatische Herunterladen von Dateien ist ebenfalls ganz einfach. Sie können selbst ein UI-Klickereignis erstellen und es dann automatisch auslösen, um einen automatischen Download zu erreichen.
Schauen wir uns nun den endgültigen Code an:
Kopieren Sie den Codecode wie folgt:
Funktion downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent ohne die letzten beiden Parameter meldet einen Fehler unter FF. Vielen Dank an Barret Lee für das Feedback.
aLink.download = Dateiname;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Sobald downloadFile aufgerufen wird, wird die Datei nicht automatisch heruntergeladen ^_^.
Hinweis: Derzeit (2014-01) müssen Blob und URL.createObjectURL in Standardbrowsern keine privaten Präfixe mehr hinzufügen, sodass Sie sie bedenkenlos verwenden können. ~~ Wenn Sie Bedenken haben, können Sie „Kann ich verwenden“ überprüfen.