Descargar un archivo usando JavaScript
-
Utilice el atributo
downloaden HTML para descargar archivos - Uso de una función de escritura personalizada para crear y descargar archivos de texto en JavaScript
-
Utilice la biblioteca
Axiospara descargar archivos
En este artículo, aprenderemos cómo descargar archivos usando JavaScript. La descarga automática de archivos nos ayuda a recuperar archivos directamente desde la URL con una función de JavaScript sin contactar con ningún servidor. Lo lograremos usando nuestras funciones escritas personalizadas y usando el atributo de descarga de HTML 5.
Utilice el atributo download en HTML para descargar archivos
El atributo download en HTML 5 se utiliza para descargar archivos cuando los usuarios hacen clic en el hipervínculo. Se utiliza con etiquetas de anclaje: <a> y <area>. Estamos obligados a establecer el atributo href especificando el origen del archivo. El valor del atributo download determina el nombre del archivo descargado. Si se elimina este valor, el nombre del archivo descargado será el mismo que el nombre del archivo original.
<!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>
En el código anterior, descargamos una imagen apple.png usando el atributo download. Primero creamos la etiqueta de anclaje que contiene la dirección de la imagen y le agregamos el atributo download. Luego también creamos un botón de descarga para facilitar la descarga de archivos.
Uso de una función de escritura personalizada para crear y descargar archivos de texto en JavaScript
Este enfoque creará datos de texto sobre la marcha y luego usará JavaScript para crear un archivo de texto y luego descargarlo.
Descargar algoritmo
-
Crea un área de texto para ingresar los datos de texto.
-
Cree una etiqueta de anclaje
<a>utilizando la propiedadcreateElementy asígnele los atributosdownloadyhref. -
Usa el
encodeURIComponentpara codificar el texto y agregarlo a URI como su componente. Esto nos ayudará a reemplazar ciertos caracteres especiales con una combinación de secuencias de escape. -
Establezca el tipo de fecha en
text/plainy la codificación enUTF-8utilizandodata:text/plain; charset = utf-8como valor de atributo dehref. -
Añade este elemento creado al cuerpo del documento (página HTML).
-
Utilice
element.click()para simular un clic del mouse. -
Elimina el elemento del cuerpo del documento (página HTML).
Adjunte un detector de eventos que busque un clic en un botón de descarga. Llame a la función de descarga con texto del área de texto y el nombre de archivo del archivo de texto como parámetros.
<!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>
Utilice la biblioteca Axios para descargar archivos
En este enfoque, usaremos la biblioteca Axios para descargar archivos. Antes de continuar con los detalles del enfoque, entendamos qué es Blob, el tipo de datos utilizado para descargar archivos usando Axios.
Blob
Blob significa Binary Large Object y es un tipo de datos que puede almacenar datos binarios. Representa datos como programas, fragmentos de código, objetos multimedia y otras cosas que no son compatibles con el formato nativo de JavaScript.
Descargar archivos
-
Crea una solicitud Axios
getcon la URL como fuente del archivo y elresponseTypecomo unblob. -
Resuelve la promesa devuelta por la solicitud de Axios realizando los siguientes pasos:
- Cree un DOMString que contenga la URL que representa el objeto Blob.
- Cree una etiqueta de anclaje
<a>utilizando la propiedadcreateElementy asígnele los atributosdownloadyhref. - Establezca
hrefcomo la URL creada en el primer paso y el atributodownloadcomo el nombre del archivo descargado. - Adjunte este enlace al documento y simule un clic utilizando el método
.click(). - Eliminar este enlace del documento.
<!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>
Aquí obtenemos imágenes aleatorias de un sitio, usamos Axios para solicitar esas imágenes en forma de blobs y luego las descargamos usando el atributo download de la etiqueta de anclaje. Este método no está restringido al texto sin formato ingresado por el usuario como el método anterior. Podemos solicitar cualquier tipo de datos de una API y luego usar este enfoque para guardar datos dentro de nuestra computadora.
Todos los navegadores principales admiten todos los métodos anteriores, excepto el método que utiliza la biblioteca Axios. Internet Explorer aún no es compatible con las promesas nativas de ES6 y Axios depende en gran medida de ellas.
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