So herunterladen Sie eine Datei mit JavaScript herunter

JavaScript umfasst ein Bündel integrierter Funktionen, Methoden und Eigenschaften, um die Anforderungen des Benutzers sowie die Anforderungen des Entwicklers zu erfüllen. Datei -Herunterladen ist eine nützliche Aufgabe in jedem Browser, um eine Datei auszulösen und herunterzuladen. Mit JavaScript können Sie jede Datei aus dem Internet herunterladen. Dieser Beitrag zeigt verschiedene Beispiele für das Herunterladen einer Datei mit JavaScript.

• So laden Sie eine Datei in JavaScript herunter
• Beispiel 1: Herunterladen einer Datei aus dem Internet herunterladen
• Beispiel 2: Erstellen und Herunterladen einer Textdatei

So laden Sie eine Datei in JavaScript herunter?

JavaScript bietet an href Attribut für das Herunterladen einer Datei. Das Attribut wird von HTML 5 unterstützt. Mit diesem Attribut können Benutzer die verwenden Verknüpfung ebenso wie Taste zum Herunterladen von Dateien entsprechend ihren Anforderungen. Zwei Beispiele werden ausführlich erläutert, um Text sowie Bilddateien in JavaScript herunterzuladen.

Beispiel 1: Herunterladen einer Datei aus dem Internet herunterladen

Ein Beispiel ist angepasst, um a herunterzuladen JPG Datei mit einem Hyperlink in JavaScript verwenden. Der Code -Stück ist in zwei benannte Dateien unterteilt HTML Und JavaScript.

HTML Quelltext

<H2> Ein Beispiel zum Herunterladen der JPG -DateiH2>

Bitte klicken Sie auf den Link unten unten

Download-Link

In diesem Code,

• Erstens ist das gesamte Skript innerhalb geschrieben Tags für die Ausrichtung der Mittelpunkte.
• Danach ein Anker Tag wird verwendet, um einen Link namens “anzugeben“Download-Link.”
  Schließlich eine Bilddatei mit dem Namen “Remotar-Jobs.JPG ” wird heruntergeladen, indem Sie die drücken "Download-Link"

JavaScript -Code

// einen Link erstellen
const download = (p, f) =>
const Anchor = Dokument.CreateLement ('a');
Anker.href = p;
Anker.download = f;
dokumentieren.Körper.appendChild (Anker);
Anker.klicken();
dokumentieren.Körper.removechild (Anker);
;

Die Beschreibung des JavaScript -Codes ist unten geschrieben:

• Der herunterladen Attribut wird verwendet, indem zwei Argumente bestanden werden, P Und
• Danach eine Anker Das Objekt wird erstellt, das der HTML -Datei zugeordnet ist, indem das übergeben "A"
• Das Argument P Gibt den Speicherort der Datei an, die dem zugeordnet ist href
• Darüber hinaus das andere Argument F Bezieht sich auf den Namen der heruntergeladenen Datei.
• zusätzlich appendChild Eigenschaft wird verwendet, um die auszulösen Anker
• Endlich, das removechild Eigenschaft wird verwendet, um das von der erstellte Ereignis zu entfernen klicken().

Ausgang

Die Ausgabe gibt eine Nachricht mit einem zurückDownload-Link". Nach dem Drücken eines Links wird eine Bilddatei im JPG -Format heruntergeladen.

Beispiel 2: Erstellen und Herunterladen einer Textdatei

Ein weiteres Beispiel wird für das Herunterladen a in Betracht gezogen Text Datei in JavaScript. In diesem Beispiel a Taste ist beigefügt, um a herunterzuladen Text Datei. Hier zeigt das Beispiel, dass der Benutzer Text in ein Textfeld eingeben kann und der Text in eine Textdatei heruntergeladen wird. Der Name der heruntergeladenen Datei lautet “JavaScript.txt". Der vollständige Code ist in einer HTML -Datei geschrieben.

HTML Quelltext

Ein Beispiel zum Herunterladen der Textdatei

Bitte klicken Sie auf den Link unten unten

Willkommen bei JavaScript

Die Codebeschreibung wird unten erörtert:

• Ein Textbereich wird mit dem spezifiziert Tags, in denen der Benutzer Daten zum Herunterladen ändern kann.
• A "Download -Schaltfläche" ist beigefügt, um eine Datei herunterzuladen.

JavaScript

dokumentieren.GetElementById ("Dwn-Btn").AddEventListener ("Click", function ()
var t = Dokument.GetElementById ("Val").Wert;
var fn = "JavaScript.txt";
dwn (fn, t);
, FALSCH);
Funktion dwn (fn, t)
var element = document.CreateLement ('a');
Element.setAttribute ('href', 'data: text/plain; charset = utf-8,' + codouricomponent (t));
Element.setAttribute ('download', fn);
Element.Stil.display = 'keine';
dokumentieren.Körper.appendChild (Element);
Element.klicken();
dokumentieren.Körper.removechild (element);

Der Code wird erklärt als:

• Ein Besitz AddEventListener wird eingesetzt, um a auszulösen Funktion() Durch das Bestehen der klicken Wert der Taste.
• Eine Methode dwn wird verwendet, um eine Datei durch Bestehen herunterzuladen fn Und T
• Der SetAttribute wird verwendet, um die festzulegen href Und herunterladen Attribute.
• Der appendChild Immobilien werden angewendet, um Elemente anzuhängen.
• Danach die klicken() Die Methode wird auf das Element angewendet.
• Zuletzt die removechild () Methode entfernt die Kinderelemente.

Ausgang

Die Ausgabe zeigt einen Textbereich an, in dem die Nachricht “Willkommen bei JavaScript ” ist geschrieben. Nach dem Drücken der “Download -Schaltfläche ”, die Textdatei benannt „JavaScript.txt" wird heruntergeladen und enthält die Nachricht darin.

Abschluss

Der href Das Attribut wird verwendet, um eine Datei herunterzuladen, indem ein Ereignis in JavaScript ausgelöst wird. Basierend auf href Attribut, zwei Beispiele werden praktisch zum Herunterladen implementiert Bild Und Text Dateien. Im ersten Beispiel a Hyperlink ist beigefügt, um eine herunterzuladen Bild Datei, während im zweiten Beispiel a Taste wird zum Herunterladen von a eingesetzt Text Datei. In diesem Handbuch haben Sie die Attribute von JavaScript zum Herunterladen einer Datei gelernt.