Cómo descargar un archivo usando JavaScript/jQuery

Descargar archivos es una tarea común en el desarrollo web. JavaScript y jQuery ofrecen múltiples opciones para descargar archivos desde el servidor sin recargar la página. En este artículo aprenderás cómo descargar un archivo usando JavaScript/jQuery y cómo visualizarlo al usuario.

Preparación del archivo para descargar

Antes de descargar un archivo, debes asegurarte de que esté disponible en el servidor mediante una url o un enlace directo, que permita su acceso y descarga. Si el archivo no existe, deberás crearlo primero. En el siguiente ejemplo se descargará un archivo .txt.

Paso 1: Crear una URL del archivo

Primero, debes crear una URL del archivo que quieres descargar. Si el archivo está en el mismo dominio que tu página web, puedes utilizar una ruta relativa. Si el archivo está en un dominio diferente o en un servidor externo, necesitarás una URL absoluta.

Ejemplo:

const fileUrl = 'https://www.midominio.com/archivo.txt';

Paso 2: Crear un enlace de descarga

Una vez que tienes la URL del archivo, debes crear un enlace de descarga en tu página mediante un botón o cualquier otro elemento que desees. A continuación, te mostramos un ejemplo de cómo hacerlo con un botón.

Ejemplo:

<button onclick="descargarArchivo()">Descargar archivo</button>

Descargando un archivo con JavaScript

Ahora que tienes el archivo y un enlace de descarga en tu página, debes crear una función para descargarlo. Primero, crearemos la función en JavaScript usando el objeto XMLHttpRequest.

Paso 1: Crear una función de descarga

En este ejemplo, utilizaremos XMLHttpRequest para hacer una petición GET al servidor y descargar el archivo.

Ejemplo:

function descargarArchivo() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', fileUrl, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      const url = window.URL.createObjectURL(xhr.response);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'archivo.txt';
      document.body.appendChild(a);
      a.click();
    }
  };
  xhr.send();
}

Paso 2: Ejecutar la función de descarga

Por último, debes llamar a la función de descarga cuando se hace clic en el enlace de descarga.

Ejemplo:

<button onclick="descargarArchivo()">Descargar archivo</button>

Descargando un archivo con jQuery

También puedes descargar un archivo con jQuery utilizando la función ajax(). Esta función es similar a XMLHttpRequest pero con una sintaxis más sencilla.

Paso 1: Crear una función de descarga

En este ejemplo, utilizaremos ajax() para hacer una petición GET al servidor y descargar el archivo.

Ejemplo:

function descargarArchivo() {
  $.ajax({
    url: fileUrl,
    method: 'GET',
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {
      const a = document.createElement('a');
      const url = window.URL.createObjectURL(data);
      a.href = url;
      a.download = 'archivo.txt';
      a.click();
      window.URL.revokeObjectURL(url);
    }
  });
}

Paso 2: Ejecutar la función de descarga

Por último, debes llamar a la función de descarga cuando se hace clic en el enlace de descarga.

Ejemplo:

<button onclick="descargarArchivo()">Descargar archivo</button>

Conclusión

Descargar archivos utilizando JavaScript y jQuery es una tarea fácil y sencilla. Ahora que conoces cómo hacerlo, podrás incorporar esta funcionalidad en tus proyectos web sin dificultad alguna. ¡Empieza a añadir archivos de descarga para tus usuarios y enriquece la experencia de tus visitantes!

Preguntas frecuentes

¿En qué navegadores se puede utilizar esta función?

Esta función se puede utilizar en todos los navegadores modernos incluyendo Chrome, Firefox, Safari e Internet Explorer 10+.

¿Se pueden descargar diferentes tipos de archivos?

Sí, puedes descargar cualquier tipo de archivo como imagenes, audio, videos, PDFs, entre otros.

¿Se puede editar el nombre del archivo descargado?

Sí, puedes editar el nombre del archivo descargado cambiando el valor de la propiedad download.

¿Se pueden descargar varios archivos a la vez?

No, esta función sólo permite descargar un archivo a la vez. Si deseas descargar varios archivos, necesitarás repetir el proceso para cada uno.

¿Cómo puedo hacer que un archivo se descargue automáticamente cuando se carga la página?

Puedes hacer que un archivo se descargue automáticamente usando la función JavaScript "window.onload". Esta función se ejecuta cuando se carga completamente la página.

Ejemplo:

window.onload = function() {
  descargarArchivo();
};

JavaScript | Programa para Escribir Datos en un Archivo de Texto

Cómo seleccionar Onchange en JavaScript

JavaScript Scrollable Div

Cómo hacer que la primera letra sea minúscula en JavaScript

Obteniendo el div padre de un elemento - JavaScript

Cómo ordenar un Array de Objetos alfabéticamente en JavaScript

Cómo ocultar un botón en JavaScript

Cómo encontrar el índice de un elemento de un array en JavaScript

Cómo añadir un valor a un arreglo en JavaScript