Herunterladen einer Datei mit JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Herunterladen einer Datei mit JavaScript
Harshit Jindal 2 Oktober 2021
JavaScript JavaScript File
  1. Verwendung des download-Attributs in HTML zum Herunterladen von Dateien
  2. Verwenden einer benutzerdefinierten Funktion zum Erstellen und Herunterladen von Textdateien in JavaScript
  3. Verwenden Sie die Bibliothek Axios, um Dateien herunterzuladen
Herunterladen einer Datei mit JavaScript

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.

<!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 createElement ein Ankertag <a> und weisen Sie ihm die Attribute download und href zu.
  • 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/plain und die Codierung auf UTF-8 mit den data:text/plain; charset = utf-8 als Attributwert von href.
  • 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.

<!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 dem responseType als blob.
  • 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 createElement ein Ankertag <a> und weisen Sie ihm die Attribute download und href zu.
    • Legen Sie href als die im ersten Schritt erstellte URL und das Attribut download als 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.
<!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.

Autor: Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

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

Verwandter Artikel - JavaScript File