Herunterladen einer Datei mit JavaScript
-
Verwendung des
download-Attributs in HTML zum Herunterladen von Dateien - Verwenden einer benutzerdefinierten Funktion zum Erstellen und Herunterladen von Textdateien in JavaScript
-
Verwenden Sie die Bibliothek
Axios, um Dateien herunterzuladen
In diesem Artikel erfahren Sie, wie Sie Dateien mit JavaScript herunterladen. Durch das automatische Herunterladen von Dateien können wir Dateien mit einer JavaScript-Funktion direkt von der URL abrufen, ohne Server zu kontaktieren. Dies erreichen wir mit unseren benutzerdefinierten schriftlichen Funktionen und dem Download-Attribut von HTML 5.
Verwendung des download-Attributs in HTML zum Herunterladen von Dateien
Das Attribut download in HTML 5 wird zum Herunterladen von Dateien verwendet, wenn Benutzer auf den Hyperlink klicken. Es wird mit Ankertags verwendet - <a> und <area>. Wir müssen das Attribut href festlegen, das die Quelle der Datei angibt. Der Wert des Attributs download bestimmt den Namen der heruntergeladenen Datei. Wenn dieser Wert entfernt wird, entspricht der heruntergeladene Dateiname dem ursprünglichen Dateinamen.
htmlCopy<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
Im obigen Code laden wir ein Bild apple.png mit dem Attribut download herunter. Wir erstellen zuerst das Ankertag mit der Adresse des Bildes und fügen ihm das Attribut download hinzu. Dann haben wir auch einen Download-Button erstellt, um das Herunterladen von Dateien zu erleichtern.
Verwenden einer benutzerdefinierten Funktion zum Erstellen und Herunterladen von Textdateien in JavaScript
Bei diesem Ansatz werden Textdaten im laufenden Betrieb erstellt und anschließend mithilfe von JavaScript eine Textdatei erstellt und anschließend heruntergeladen.
Algorithmus herunterladen
-
Erstellen Sie einen Textbereich zur Eingabe der Textdaten.
-
Erstellen Sie mit der Eigenschaft
createElementein Ankertag<a>und weisen Sie ihm die Attributedownloadundhrefzu. -
Verwenden Sie die
encodeURIComponent, um den Text zu codieren und als Komponente an den URI anzuhängen. Dies hilft uns, bestimmte Sonderzeichen durch eine Kombination von Escape-Sequenzen zu ersetzen. -
Setzen Sie den Datumstyp auf
text/plainund die Codierung aufUTF-8mit dendata:text/plain; charset = utf-8als Attributwert vonhref. -
Hängt dieses erstellte Element an den Hauptteil des Dokuments an (HTML-Seite).
-
Verwenden Sie
element.click(), um einen Mausklick zu simulieren. -
Entfernen Sie das Element aus dem Hauptteil des Dokuments (HTML-Seite).
Fügen Sie einen Ereignis-Listener hinzu, der nach einem Klick auf eine Download-Schaltfläche sucht. Rufen Sie die Download-Funktion mit Text aus dem Textbereich und dem Dateinamen der Textdatei als Parameter auf.
htmlCopy<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Verwenden Sie die Bibliothek Axios, um Dateien herunterzuladen
Bei diesem Ansatz verwenden wir die Bibliothek Axios, um Dateien herunterzuladen. Bevor wir mit den Details des Ansatzes fortfahren, lassen Sie uns verstehen, was Blob ist, der Datentyp, der zum Herunterladen von Dateien mit Axios verwendet wird.
Blob
Blob steht für Binary Large Object und ist ein Datentyp, der Binärdaten speichern kann. Es repräsentiert Daten wie Programme, Codefragmente, Multimedia-Objekte und andere Dinge, die das native JavaScript-Format nicht unterstützen.
Dateien herunterladen
-
Erstellen Sie eine Axios
get-Anforderung mit der URL als Quelle der Datei und demresponseTypealsblob. -
Lösen Sie das von der Axios-Anfrage zurückgegebene Versprechen, indem Sie die folgenden Schritte ausführen:
- Erstellen Sie einen DOMString, der die URL enthält, die das Blob-Objekt darstellt.
- Erstellen Sie mit der Eigenschaft
createElementein Ankertag<a>und weisen Sie ihm die Attributedownloadundhrefzu. - Legen Sie
hrefals die im ersten Schritt erstellte URL und das Attributdownloadals Namen der heruntergeladenen Datei fest. - Fügen Sie diesen Link dem Dokument hinzu und simulieren Sie einen Klick mit der Methode
.click(). - Entfernen Sie diesen Link aus dem Dokument.
htmlCopy<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
Hier erhalten wir zufällige Bilder von einer Site, fordern diese Bilder mit Axios in Form von Blobs an und laden sie dann mit dem Attribut download des Ankertags herunter. Diese Methode ist nicht wie die vorherige Methode auf den vom Benutzer eingegebenen Klartext beschränkt. Wir können jede Art von Daten von einer API anfordern und dann diesen Ansatz verwenden, um Daten auf unserem Computer zu speichern.
Alle gängigen Browser unterstützen alle oben genannten Methoden mit Ausnahme der Methode, die die Bibliothek Axios verwendet. Internet Explorer unterstützt die nativen ES6-Versprechen immer noch nicht, und Axios hängt stark von ihnen ab.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn