Consejo rápido uso del atributo de descarga de HTML5

Crear un enlace de descarga en HTML es sencillo; agregue una etiqueta de anclaje y apunte al archivo dentro de la href atributo. Sin embargo, algunos tipos de archivos (como imágenes, .pdf, .txt y .doc, por ejemplo) no se descargarán. Ellos, en cambio, se abrirán en el navegador..

Si tiene acceso del lado del servidor a su sitio web, hay algunas soluciones que puede utilizar, como la configuración de .htaccess, Para descargar estos archivos directamente. Si su sitio está alojado con un servicio gratuito como WordPress.com, Blogspot o tal vez páginas Github que no le permiten hacerlo, considere usar el descargar atributo.

Usando el atributo "Descargar"

los descargar atributo es parte de la especificación HTML5 y expresa un enlace como descargar enlace en lugar de un relativo a la navegación enlazar.

los descargar atributo también le permite cambiar el nombre del archivo al descargar. Cuando el archivo reside en el servidor, especialmente si se ha generado automáticamente, puede nombrarse sistemáticamente con números y guiones, por ejemplo acme-doc-2.0.1.txt. Sería mejor que los usuarios reciban el archivo con un nombre más sensible cuando se descarguen, tal vez como: Acme Documentation (ver. 2.0.1) .txt (sin olvidar la extensión de archivo).

Así es como se vería en la práctica:

Descargar texto 

Pruébelo en la página de demostración, y debería encontrar el archivo descargado con el nombre especificado en el descargar atributo.

Un par de notas:

• Firefox solo permite a los usuarios descargar archivos del mismo origen debido a un problema de seguridad. El archivo debe provenir de su propio servidor o nombre de dominio, de lo contrario se abrirá en el navegador.
• Mientras que la descarga de archivos de origen cruzado está permitida en Chrome y la última versión de Opera (con Chromium / Blink), ambos ignorarán el valor del atributo. En otras palabras, el nombre del archivo se mantendrá sin cambios..

Proporcionar un respaldo

En el momento de escribir este descargar el atributo aún no está implementado en Safari y (como es de esperar) Internet Explorer. Diciendo que, de acuerdo con el estado moderno de IE, actualmente se encuentra en la parte superior de la lista de desarrollo y está recibiendo una gran cantidad de votos.. 

Mientras tanto, podemos agregar un respaldo decente, como proporcionar instrucciones adicionales debajo del enlace de descarga para los navegadores no compatibles. Para ello, tendremos que descargar Modernizr con el descargar prueba de características incluida.

Entonces podemos agregar el siguiente script.

if (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (this) .attr ('download'); if (typeof $ download! == typeof undefined && $ download! == false) var $ el = $ ( '
') .addClass (' instrucciones de descarga '). texto (' Haz clic derecho y selecciona "Descargar archivo vinculado" '); $ el.insertAfter ($ (this)); );  

El script probará si el navegador es compatible con descargar atributo; Si no se agregará una nueva. 

 con la clase para fines de estilo, así como el texto de instrucciones, e insértelo inmediatamente debajo de cualquier enlace que se haya proporcionado con el descargar atributo.

La instrucción de texto aparece en Safari..

Terminando

los descargar el atributo hace que el manejo de los enlaces de descarga sea muy conveniente para cualquier persona que no tenga acceso a la configuración del lado del servidor. Estoy deseando que Internet Explorer y Safari implementen el descargar atribuir pronto!

Diseño web