jQuery-Download-Datei
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:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook