Archivo de descarga jQuery
Este tutorial demostrará cómo descargar un archivo usando jQuery.
Archivo de descarga jQuery
jQuery también se puede usar para descargar un archivo con la misma funcionalidad que JavaScript y HTML. Podemos usar la etiqueta de anclaje HTML con jQuery para descargar un archivo.
Veamos el paso a paso del proceso:
-
Primero, cree una etiqueta de anclaje en HTML con la fuente
#. -
Cree un método
ready()para que podamos realizar la descarga cuando se cargue el DOM. -
Dentro del método
ready(), cree un eventoclickque se dirija a la etiqueta de anclaje. -
Establezca el error en
preventDefault. -
Finalmente, configure el
hrefde la etiqueta de anclaje a la ruta del archivo que se descargará. -
Ejecute el sistema y haga clic en el enlace. El archivo se descargará.
Intentemos implementar un ejemplo basado en los pasos anteriores:
<!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>
El código anterior descargará el archivo al hacer clic. Ver la salida:
Como podemos ver, usamos window.location.href = "delftstack.docx"; para establecer la ruta de descarga del archivo. Aquí también podemos usar el attr() para establecer el atributo href en nuestra ruta.
Ver otro ejemplo:
<!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>
Ahora, el código usará el método attr para descargar el archivo desde la ruta dada. Ver la salida:
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