El atributo «download», para descarga de recursos
El atributo download para el elemento a, se encuentra en la nueva especificación de HTML, aunque actualmente el único navegador que lo soporta es Chrome.
Este atributo le indica al navegador que el recurso a dónde apunta el enlace no es para navegarlo, sino que es para descargarlo.
El atributo puede o no tener un valor, si lo tiene es el nombre por defecto con el que el archivo se guardará en la máquina del usuario.
El siguiente es un ejemplo del código:
1 2 3 | <a href="../pdfs/reporte2-05-10.pdf" download="Reporte2Mayo2010"> Descargar Archivo </a> |
Así el navegador en vez de mostrarnos el archivo «reporte2-05-10.pdf», lo descargará con el nombre «Reporte2Mayo2010.pdf», a no ser que el usuario lo guarde con otro nombre.
El punto bueno del a[download] es que permite descargar contenido creado en nuestras aplicaciones. Por ejemplo un canvas a archivo de imagen.
Otros elementos o atributos interesantes son: el atributo pattern, los atributos data, el elemento main o los elementos details y summary.
Me ha parecido un tanto raro que tanta gente no conozca este tipo de atributos de HTML5, estas pequeñas funcionalidades a veces nos pueden salvar de intentar hacer algún hack con Javascript o incluso desde el server!! Lo que les recomiendo es que hagan algún curso online, para cursarlo pero también (y muy importante) para tenerlo como referencia en el futuro! Me pasa todo el tiempo de que recuerdo que algo lo he visto en algún lado cuando lo necesito y entonces voy y lo veo de nuevo en el video. Hay cursos muy buenos en Udemy, por ejemplo este de HTML5 Completo o sino alguno más corto como «CSS desde cero: Desarrollo Web/HTML/CSS3 para profesionales» de Josué Pizano… muy recomendables ambos cursos!
Donate To Address
Donate Via Wallets- Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
Please Add coin wallet address in plugin settings panel
44 comentarios para “El atributo «download», para descarga de recursos”
Dejar un comentario
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
Pues yo no lo veo tan útil. Creo que si el usuario quiere descargar el destino del enlace lo puede hacer con clic derecho.
Creo que si es útil para contenido creado en la propia página, aunque no creo que vaya a ser muy popular?
[…] Hoje pela manhã, conversando com o Riccardo Benetti, ele descobriu uma novidade na tag (HTML5). A novidade aparece no artigo do site htmlcinco. […]
Recientemente hice una app para forzar descargas con PHP, creen que esto lo sustituya? Lo probaré de todas formas, a mi si me parece útil ya que en los smartphones o tablets no podemos hacer clic derecho y como ejemplo está al querer bajar música, un link de archivos .mp3 se visualizan con un reproductor y no podemos descargarlo cuando en la pc si se puede.
a mi me parece bastante util, sobre todo si tienes el contenido lo tienes en un iframe y deseas que salga la ventana de descarga en lugar de que cuando se abra el pdf te tape todo el iframe. Me funciono en FireFox 22.0
Viejo excelente valla bobada que dicen que no va a tener cogida esto es espectacular estoy diseñando una pagina de musica online y esto era lo que buscaba descarga directa el archivo de audio sin necesidad de comprimir y bueno la mayoría de la gente navega con chroom o dar la advertencia en la pagina pero bien bien muy bien Gracias
Viejo excelente valla bobada que dicen que no va a tener cogida esto es espectacular estoy diseñando una pagina y esto era lo que buscaba descarga directa el archivo de audio sin necesidad de comprimir muy bien Gracias
Excelente aporte, muchas gracias.
Primero que nada Excelente Aporte, quienes dicen que no va a tener acogida definitivamente no saben de lo que estan hablando.
hoy en día muchos navegadores tienen acciones predefinidas por defecto para muchos tipos de archivos, en el caso de archivos de audio videos o PDF los navegadores te lo visualizan en lugar de descargarlo.
dar click derecho para seleccionar guardar enlace (es correcto) pero solo cuando estamos seguros de que nuestros usuarios poseen este nivel de conocimiento, y cuando no nos importa mucho la usabilidad (malas prácticas de desarrollo).
esto esta pensado para los desarrolladores y los usuarios
Excelente aporte
Amigo excelente aporte, s bastante util ya que tengo una pagina de una intranet en donde los usuarios van a poder descargar los archivos, adicional no se nesecita de ningun plugin para realizar esta accion
Hola
tengo una duda y es si tengo el documento en mi escritorio y deseo compartirlo via html
como tendria que hacerlo??
Muchísimas gracias por el aporte… es lo que estaba buscando 🙂
Estimado colega y dueño de este blog quiero decirle que me sirvio mucho el codigo de descargas GRACIAS que dios te bendiga hermano
Muy útil para servidores que no proveen, aunque parezca mentira, la opción de poder descargar una imagen con botón derecho. Las imágenes quedan chatas.
Y tuve que armar una sección de descargas de wallpapers y necesitaba este código.
GRACIAS!!
no sabía que existía ese atributo, gracias por compartirlo. =D
Al menos yo, lo encontré muy útil , necesitaba una forma de que el usuario pudiese descargar un formato. Con esto rebien, ahora solo tengo que ver como adaptarlo a un botón hahaha, pero eso sale ahorita 😉
No sirve para archivos de EXCEL…
Te convierte el archivo a TXT y posteriormente lo daña….
Este atributo es genial, lastima que solo chrome lo soporta, o si no lo usuaria para un proyecto que estoy desarrollando, asi que mejor utilizo php para asegurarme que funcione en cualquier plataforma
Es oficial ahora todos los navegadores lo soportan
claro que es útil porque si tengo las paginas protegidas el botón izquierdo no hace nada, y es como debe hacerse que hay gente que es muy negada
Hola,si funciona en el servidor por default del programa, pero cuando lo subo a la web no funciona la descarga, porque?
Excelente, amigo gracias me sirvió mucho,, sigue asi
¡GRACIAS! ME FUE DE MUCHA AYUDA
¡Muy buen aporte! Era justo lo que necesitaba y funciona perfecto. ¡Gracias!
muy util, para poner a descargar un cupón, las entradas del cine.. o cosas parecidas, lo reomiendo.
funciona de lujo en google crome. lo probe con archivos comprimidos en rar, pdf y xls sin problemas.
Hola! me sirvió para poner un link de descarga PDF pero sólo para quienes acceden a mi blog desde una laptop o computadora de escritorio, sin embargo, quiero que funcione también en móviles como Iphone y hasta ahora no he encontrado la manera. Espero que alguien me pueda apoyar con esto.
Muchas gracias y saludos!
muy bueno pero abra otra manera que no asea atreves de un enlace ?
!!EXCELENTE!! ME COSTO UN LEVE DE TRABAJO PERO YA PUEDEN MIS VISITANTES DESCARGAR EL TRACK QUE SE REPPRODUCE AL ABRIR MI PAG WEB
ALGUIEN SABE COMO PUEDO APLICAR EL ATRIBUTO «DOWNLOADS» EN ARCHIVOS DE VIDEOS.
LO QUE INTENTO ES DESCARGAR VIDEO TAL COMO SE DESCARGA EL PDF, PERO LO QUE OCURRE AL DAR CLIC EL NAVEGADOR REPRODUCE EL VIDEO EN VEZ DE DESCARGARLO.
Para mi sera util. porque puedo usarlo para que otras personas descargar el archivo que mostrara mi pagina. Gracias por el comando
simple: copia el nombre EXACTO del vídeo, en caso a que se llamara «Ejemplo.mp4″ (Copia también la extensión del archivo) vas a copiar ese nombre EXACTAMENTE, y lo vas a pegar así: href=»Ejemplo.mp4″ rel=»nofollow»
Espero te sirva 😀
ups, perdón… Se creó un elace de descarga :/
Bueno, dale en inspeccionar elemento XD
Soy estudiante empírico, gracias por esta ayuda, inicie una actividad de asesoría en comercio en red, y creo útil esto para los clientes. Dios los bendiga
Hola me parece muy interesante porque muchas veces queremos es hacer la descarga para leer después, he allí la importancia, no se espera la visualización, sinó que se descarga e incluso se pueden descargar varios archivos simultáneamente, la vida está llena de detalles, felicitaciones,
Atte, El Llanero del Guárico
Gracias por el aporte. Tengo una duda: quisiera aplicar este código html5 a un botón en un documento de indesign para generar un pdf iteractivo y que al clicar el botón fuerce la descarga directamente. ¿Sabes cómo puedo hacerlo?
Gracias
Gracias por el aporte era justo lo que estaba buscando
Pues yo me los creo solito sin app ni nada!
Gracias, estaba buscando este atributo.
Saludos.
Muy buen aporte, muchas gracias, sólo tengo una pregunta para que éste código funcione hay que subir la web al web host?
Estoy tratando de agragar boton de descarga de videos aparece todo como queria excepto que no descarga, hay alguien que pueda ayudarme con esto.
muy buena la información sabiendo como utilizar el atributo… saludos 🙂
Me parece muy útil, para qué complicarse tratando de reinventar la rueda.