Suggerimento rapido utilizzo dell'attributo download HTML5

Creare un collegamento per il download in HTML è semplice; aggiungi un tag di ancoraggio e punta al file all'interno del file href attributo. Alcuni tipi di file, tuttavia, (ad esempio immagini, .pdf, .txt e .doc, ad esempio) non verranno scaricati. Loro, invece, saranno aperti nel browser.

Se si dispone dell'accesso lato server al proprio sito Web, è possibile utilizzare alcune soluzioni alternative, ad esempio la configurazione di .htaccess, per scaricare questi file direttamente. Se il tuo sito è ospitato con un servizio gratuito come WordPress.com, Blogspot o forse pagine Github che non ti permettono di farlo, prendi in considerazione l'utilizzo del Scaricare attributo.

Utilizzando l'attributo "Download"

Il Scaricare l'attributo è parte della specifica HTML5 ed esprime un collegamento come Scaricare link piuttosto che a navigazione collegamento.

Il Scaricare attributo consente inoltre di rinominare il nome del file durante il download. Quando il file si trova sul server, specialmente se è stato generato automaticamente, può essere nominato sistematicamente con numeri e trattini, ad esempio acme-doc-2.0.1.txt. Sarebbe meglio per gli utenti ricevere il file con un nome più sensato quando scaricato, magari come: Documentazione Acme (versione 2.0.1) .txt (senza dimenticare l'estensione del file).

Ecco come sembrerebbe in pratica:

Scarica testo 

Fai un tentativo sulla pagina demo, e dovresti trovare il file scaricato con il nome specificato in Scaricare attributo.

Un paio di note:

• Firefox consente solo agli utenti di scaricare file della stessa origine a causa di problemi di sicurezza. Il file deve provenire dal tuo server o nome di dominio, altrimenti verrà aperto nel browser.
• Durante il download di file cross-origin è consentito in Chrome e nell'ultima Opera (con Chromium / Blink), entrambi ignorano il valore dell'attributo. In altre parole, il nome del file rimarrà invariato.

Fornire il fallback

Al momento della scrittura, il Scaricare l'attributo non è ancora stato implementato in Safari e (come ci si potrebbe aspettare) Internet Explorer. Dicendo che, secondo il moderno status di IE, è attualmente in cima alla lista di sviluppo e riceve molti voti. 

Nel frattempo, possiamo aggiungere un fallback decente, come fornire ulteriori istruzioni sotto il link per il download per i browser non di supporto. Per fare ciò, dovremo scaricare Modernizr con il Scaricare test di funzionalità incluso.

Quindi possiamo aggiungere il seguente script.

if (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (this) .attr ('download'); if (tipo di $ download! == tipo di indefinito && $ download! == falso) var $ el = $ ( '
') .addClass (' download-instruction '). text (' Fare clic con il tasto destro e selezionare "Download Linked File" '); $ El.insertAfter ($ (this)); );  

Lo script testerà se il browser supporta il Scaricare attributo; se no, aggiungerà un nuovo 

 con la classe per scopi di stile e il testo delle istruzioni, e inseriscilo immediatamente sotto qualsiasi link che è stato fornito con il Scaricare attributo.

L'istruzione di testo appare in Safari.

Avvolgendo

Il Scaricare attributo rende la gestione dei collegamenti di download molto comoda per chiunque non abbia accesso alla configurazione lato server. Non vedo l'ora che Internet Explorer e Safari implementino il Scaricare attributo presto!

Web design