English Português

Para ofrecer archivos en descarga directa muchas veces es necesario evitar el comportamiento por defecto del navegador y, así, forzar la descarga de los archivos. Una forma muy común de hacerlo es por medio de instrucciones del lado del servidor, sin embargo, el nuevo estándar de HTML5 nos permitirá realizar la misma tarea solo con la incorporación de un nuevo atributo: download.

¿Cómo funciona el atributo download?

El atributo download funciona en los enlaces HTML, es decir, elementos <a /> y toma como valor un nombre para el archivo (no tiene que coincidir con su nombre real). Por ejemplo:

<a href="http://blogandweb.com/nombre-real.pdf" download="nombre-para-el-usuario.pdf">Descargar</a>

Esto dará como resultado que cuando el usuario de click sobre el enlace se presentará una ventana de descarga del archivo en http://blogandweb.com/nombre-real.pdf pero con el nombre por defecto: nombre-para-el-usuario.pdf. Este código en Chrome luce así después de dar click:

atributo-download-hml5

Si se quiere usar el mismo nombre de archivo del original, solo es necesario agregar el atributo download sin valor:

<a href="http://blogandweb.com/nombre-real.pdf" download>Descargar</a>

Soporte de download.


atributo-download-hml5-soporte

Según Can I use, download es soportado en Firefox 23+, Chrome 28+ y Opera 17+, abarcando el 46.7% del tráfico. Por tanto su uso, por ahora, debe estar acompañado de una solución de lado de servidor para tener una garantía completa.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. jose / Hace 3 años /

      en firefox 27 no me funciona… aunque en chrome si

      Responder a jose →
    2. KPNG / Hace 2 años /

      Funciona excelente. Gracias!!!

      Responder a KPNG →
    3. Profesor Yeow / Hace 2 años /

      que lastima que no funciona en todos los nevegadores, y que raro que no exista una solución javascript o similar, ya que a veces modificar el php es un tanto tedioso en algunos servicios de hosting…se agradece el dato de esta etiqueta HTML5 🙂

      Responder a Profesor Yeow →
    4. Lion / Hace 2 años /

      Amigo ese codigo es una leche frita…no descarga el archivo…descarga un HTML de la pagina que contiene la descarga…PERO NO EL ARCHIVO EN SI MISMO…..

      Responder a Lion →
    5. Nicolas / Hace 2 años /

      Me ha funcionado!!! Muchas gracias por el aporte…

      Responder a Nicolas →
    6. Karl / Hace 2 años /

      Me sirvió!!! Gracias…

      Responder a Karl →
    7. rick / Hace 1 año /

      buenisimo graxias
      siempre se aprende d todos

      Responder a rick →
    8. Antonio / Hace 4 meses /

      me ha servido de gran ayuda, no sé que sería de mi sin este post

      Responder a Antonio →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad