htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

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!

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0
Share on facebook
Facebook
0
Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

44 comentarios para “El atributo «download», para descarga de recursos”

  1. Isma dice:

    Pues yo no lo veo tan útil. Creo que si el usuario quiere descargar el destino del enlace lo puede hacer con clic derecho.

  2. Lau dice:

    Creo que si es útil para contenido creado en la propia página, aunque no creo que vaya a ser muy popular?

  3. […] Hoje pela manhã, conversando com o Riccardo Benetti, ele descobriu uma novidade na tag (HTML5). A novidade aparece no artigo do site htmlcinco. […]

  4. AxelCore dice:

    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.

  5. franklyn83 dice:

    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

  6. HackerBlack dice:

    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

  7. manuel dice:

    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

  8. Jorge Roa dice:

    Excelente aporte, muchas gracias.

  9. Edison Gutierrez dice:

    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

  10. Goo2see dice:

    Excelente aporte

  11. Marlon dice:

    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

  12. guest dice:

    Hola

    tengo una duda y es si tengo el documento en mi escritorio y deseo compartirlo via html

    como tendria que hacerlo??

  13. Kryzthal Loza dice:

    Muchísimas gracias por el aporte… es lo que estaba buscando 🙂

  14. Alejandro rondon dice:

    Estimado colega y dueño de este blog quiero decirle que me sirvio mucho el codigo de descargas GRACIAS que dios te bendiga hermano

  15. Juan pablo dice:

    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!!

  16. Gabriel dice:

    no sabía que existía ese atributo, gracias por compartirlo. =D

  17. Brito dice:

    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 😉

  18. Raul Treviño dice:

    No sirve para archivos de EXCEL…
    Te convierte el archivo a TXT y posteriormente lo daña….

  19. manuel dice:

    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

  20. Manuel dice:

    Es oficial ahora todos los navegadores lo soportan

  21. alfonso dice:

    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

  22. Juan dice:

    Hola,si funciona en el servidor por default del programa, pero cuando lo subo a la web no funciona la descarga, porque?

  23. wins dice:

    Excelente, amigo gracias me sirvió mucho,, sigue asi

  24. Beatriz dice:

    ¡GRACIAS! ME FUE DE MUCHA AYUDA

  25. Analia dice:

    ¡Muy buen aporte! Era justo lo que necesitaba y funciona perfecto. ¡Gracias!

  26. kevin dice:

    muy util, para poner a descargar un cupón, las entradas del cine.. o cosas parecidas, lo reomiendo.

  27. BENJAMIN CAJERO B dice:

    funciona de lujo en google crome. lo probe con archivos comprimidos en rar, pdf y xls sin problemas.

  28. Hector dice:

    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!

  29. cristtofer dice:

    muy bueno pero abra otra manera que no asea atreves de un enlace ?

  30. ALAN SANTY dice:

    !!EXCELENTE!! ME COSTO UN LEVE DE TRABAJO PERO YA PUEDEN MIS VISITANTES DESCARGAR EL TRACK QUE SE REPPRODUCE AL ABRIR MI PAG WEB

  31. LUIS COBOD dice:

    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.

  32. Luis J. dice:

    Para mi sera util. porque puedo usarlo para que otras personas descargar el archivo que mostrara mi pagina. Gracias por el comando

  33. Bryan dice:

    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 😀

  34. Bryan dice:

    ups, perdón… Se creó un elace de descarga :/

    Bueno, dale en inspeccionar elemento XD

  35. colombiano2050 dice:

    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

  36. Rafael GR El Venezolano dice:

    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

  37. Eva dice:

    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

  38. Techmath dice:

    Gracias por el aporte era justo lo que estaba buscando

  39. AlexReyesOfficial en IG dice:

    Pues yo me los creo solito sin app ni nada!

  40. Jorge dice:

    Gracias, estaba buscando este atributo.

    Saludos.

  41. Dionis Lobo U. dice:

    Muy buen aporte, muchas gracias, sólo tengo una pregunta para que éste código funcione hay que subir la web al web host?

  42. jose dice:

    Estoy tratando de agragar boton de descarga de videos aparece todo como queria excepto que no descarga, hay alguien que pueda ayudarme con esto.

  43. werever dice:

    muy buena la información sabiendo como utilizar el atributo… saludos 🙂

  44. Jhon Toscano A. dice:

    Me parece muy útil, para qué complicarse tratando de reinventar la rueda.

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)