Cómo activar la descarga de un archivo al hacer clic en un botón HTML o JavaScript

¿Alguna vez has necesitado que los usuarios puedan descargar un archivo de tu sitio web con solo hacer clic en un botón? Este artículo te mostrará cómo hacerlo con HTML y JavaScript. Te guiaremos paso a paso para que puedas agregar esta funcionalidad a tu sitio web hoy mismo.

Etiquetas de descarga de HTML

La forma más simple de habilitar la descarga de un archivo es usar la etiqueta de descarga de HTML. Esta etiqueta permite que el usuario descargue automáticamente el archivo al hacer clic en un enlace específico. Así es cómo se hace:


<a href="ruta-del-archivo.pdf" download>Descargar archivo</a>


Es importante que coloques la ruta correcta del archivo en la etiqueta href y luego agregues el atributo download para asegurarte de que el archivo se descargue en lugar de abrirse en la ventana del navegador.

Descarga de archivo mediante JavaScript

Si deseas más control sobre cómo manejar la descarga de archivos, puedes usar JavaScript para hacerlo. Este método le permitirá personalizar la descarga, como cambiar el nombre del archivo o agregar una confirmación antes de descargarse.

Para descargar el archivo mediante JavaScript, primero debes crear una función que cree un enlace de descarga y lo haga clic. Aquí está cómo se hace:


function descargarArchivo() {
var enlace = document.createElement("a");
enlace.href = "ruta-del-archivo.pdf";
enlace.download = "nuevo-nombre-para-el-archivo.pdf";
enlace.click();
}


Agrega esto en tu archivo JavaScript y luego usa el siguiente código en tu etiqueta de botón de HTML:


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


Este botón ejecutará la función de descarga de JavaScript cuando se haga clic en él.

Ejemplos de Código

A continuación entregamos sólamente código de ejemplo:


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

<script>
function descargarArchivo() {
var enlace = document.createElement("a");
enlace.href = "ruta-del-archivo.pdf";
enlace.download = "nuevo-nombre-para-el-archivo.pdf";
enlace.click();
}
</script>


Conclusión

La descarga de archivos es una característica importante que los sitios web pueden necesitar. Ya sea que estés usando etiquetas de descarga de HTML o JavaScript, ambos métodos son fáciles de implementar en tu sitio web. Ahora es tu turno de implementar esta técnica en tu propio sitio web.

Preguntas frecuentes

¿Puedo descargar cualquier tipo de archivo con este método?

Sí, puedes descargar cualquier tipo de archivo, ya sea PDF, imagen, video o archivo de audio.

¿Cómo manejo una confirmación antes de descargar el archivo?

Puedes usar una ventana emergente de JavaScript para manejar esto. Mostrar un mensaje de confirmación y luego desencadenar la descarga si el usuario hace clic en "Aceptar".

¿El navegador solicita siempre una ubicación de descarga para los archivos?

No, el atributo de descarga en la etiqueta de descarga y la propiedad download en la creación del enlace JavaScript le permiten al navegador saber que debe descargar el archivo. Pero si tu navegador tiene configurado una opción para descargar automáticamente los archivos en una ubicación predeterminada, el archivo se descargará allí sin pedirte una ubicación.

¿Soy capaz de cambiar el nombre del archivo que se descarga?

Sí, puedes cambiar el nombre del archivo utilizando la propiedad download.
[nekopost slugs="abrir-url-new-tab-javascript,expresion-de-la-funcion-const-en-javascript,obtener-la-altura-del-elemento-div-javascript,crear-cuadro-de-entrada-javascript,crear-cuadro-de-comentarios-usando-html-css-javascript,negue-el-codigo-en-el-bloque-de-instrucciones-if-en-javascript,javascript-href-vs-onclick-para-la-funcion-de-devolucion-de-llamada-en,buscar-vs-axios,diferencia-entre-funciones-en-linea-y-anonima-javascript"]