Crear un enlace de descarga en HTML

Este artículo presentará una forma de crear un enlace de descarga en HTML.

Use el atributo descargar para crear un enlace de descarga en HTML

Podemos usar el atributo descargar dentro de un elemento ancla en HTML para crear un enlace de descarga. En la etiqueta de anclaje, podemos especificar el enlace del archivo que se descargará con la ayuda del atributo href.

La etiqueta de anclaje crea un hipervínculo al archivo de destino, y cuando hacemos clic en el enlace, el archivo se descarga. Si establecemos un valor para el atributo descargar, el archivo se descarga con ese nombre.

Por ejemplo, cree una etiqueta <a> y establezca la ruta del archivo que se descargará en el atributo href. Aquí, el archivo es una imagen, parker.jpeg.

Escribe el atributo descargar al lado del atributo href. Escriba el texto Descargar entre las etiquetas de anclaje para crear un texto en el que se pueda hacer clic.

Aquí, la imagen se encuentra en la misma carpeta que el archivo HTML.

Al hacer clic en el enlace Descargar, se nos pedirá que descarguemos el archivo. Lo más importante a considerar al crear un enlace de descarga es que la página web debe estar alojada en un servidor.

Se nos pedirá que descarguemos el archivo solo si el archivo se ejecuta en un servidor en vivo. Por ejemplo, si creamos un archivo HTML y abrimos el archivo, el archivo se abrirá en el navegador desde el sistema de archivos local.

La URL parece algo así como file:///var/www/html/index.html. En tales condiciones, cuando hacemos clic en el enlace, la imagen se mostrará en la página web, que no es lo que queremos.

Podemos implementar un par de formas de ejecutar el archivo HTML en un servidor. Una forma es iniciar el servidor local en su sistema y servir el archivo HTML desde el host local.

Es una forma elegante de ejecutar un servidor. Por lo tanto, podemos crear un enlace de descarga usando el atributo descargar en la etiqueta de anclaje en HTML.

Código de ejemplo:

<a href="/img/DelftStack/logo.png" download> Download </a>