HOWTO · jQuery
jQuery-Download-Datei
Dieses Tutorial zeigt, wie Sie eine Datei mit jQuery herunterladen.
Auf dieser Seite
Dieses Tutorial zeigt, wie Sie eine Datei mit jQuery herunterladen.
jQuery-Download-Datei
jQuery kann auch verwendet werden, um eine Datei mit der gleichen Funktionalität wie JavaScript und HTML herunterzuladen. Wir können das HTML-Anchor-Tag mit jQuery verwenden, um eine Datei herunterzuladen.
Sehen wir uns den Schritt-für-Schritt-Prozess an:
-
Erstellen Sie zuerst ein Anker-Tag in HTML mit der Quelle
#. -
Erstellen Sie eine
ready()-Methode, damit wir den Download durchführen können, wenn das DOM geladen ist. -
Erstellen Sie innerhalb der
ready()-Methode einclick-Ereignis, das auf das Anchor-Tag abzielt. -
Setzen Sie den Fehler auf
preventDefault. -
Setzen Sie abschließend das
hrefdes Anchor-Tags auf den Pfad der herunterzuladenden Datei. -
Führen Sie das System aus und klicken Sie auf den Link. Die Datei wird heruntergeladen.
Versuchen wir, ein Beispiel basierend auf den obigen Schritten zu implementieren:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Downalod File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h1>Download File Using jQuery </h1>
<h3>Click the link do download the file..</h3>
<a id="download" href="#"> Download this file</a>
<script>
$(document).ready(function () {
$("#download").click(function (e) {
e.preventDefault();
window.location.href = "delftstack.docx";
});
});
</script>
<div>
</body>
</html>
Der obige Code lädt die Datei beim Klicken herunter. Siehe die Ausgabe:
Wie wir sehen können, haben wir window.location.href = "delftstack.docx"; um den Pfad für die herunterzuladende Datei festzulegen. Hier können wir auch mit attr() das Attribut href auf unseren Pfad setzen.
Siehe ein weiteres Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Downalod File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h1>Download File Using jQuery </h1>
<h3>Click the link do download the file..</h3>
<a id="download" href="#"> Download this file</a>
<script>
$(document).ready(function () {
$("#download").click(function (e) {
$("#download").attr({target: '_blank', href : "delftstack.docx"})
});
});
</script>
<div>
</body>
</html>
Jetzt verwendet der Code die Methode attr, um die Datei aus dem angegebenen Pfad herunterzuladen. Siehe die Ausgabe:
