Snelle tip gebruik van het HTML5 download -kenmerk

Het maken van een downloadkoppeling in HTML is eenvoudig; voeg een ankertag toe en wijs naar het bestand in de href attribuut. Sommige bestandstypen (zoals afbeeldingen, .pdf, .txt en .doc bijvoorbeeld) worden niet gedownload. Ze worden in plaats daarvan in de browser geopend.

Als u server-side toegang hebt tot uw website zijn er een aantal oplossingen die u kunt gebruiken, zoals het configureren van de .htaccess, om deze bestanden rechtstreeks te downloaden. Als uw site wordt gehost met een gratis service zoals WordPress.com, Blogspot of misschien Github-pagina's die u niet toestaan ​​om dit te doen, overweeg dan het gebruik van de downloaden attribuut.

Het kenmerk "Download" gebruiken

De downloaden kenmerk maakt deel uit van de HTML5-specificatie en geeft een link weer als downloaden link in plaats van een navigatie link.

De downloaden attribuut maakt het ook mogelijk om de bestandsnaam te hernoemen tijdens het downloaden. Wanneer het bestand zich op de server bevindt, vooral als het automatisch is gegenereerd, kan het systematisch worden aangeduid met cijfers en streepjes, bijvoorbeeld acme-doc-2.0.1.txt. Het is beter voor gebruikers om het bestand met een logischer naam te ontvangen wanneer het wordt gedownload, bijvoorbeeld als: Acme-documentatie (versie 2.0.1) .txt (niet te vergeten de bestandsextensie).

Hier is hoe dat er in de praktijk zou uitzien:

Tekst downloaden 

Probeer het eens op de demopagina, en je zou het bestand moeten vinden gedownload met de naam gespecificeerd in de downloaden attribuut.

Een paar opmerkingen:

• Met Firefox kunnen gebruikers alleen bestanden van dezelfde oorsprong downloaden vanwege een beveiligingsprobleem. Het bestand moet afkomstig zijn van uw eigen server of domeinnaam, anders wordt het bestand geopend in de browser.
• Hoewel het downloaden van bestanden met meerdere originelen is toegestaan ​​in Chrome en de nieuwste Opera (met Chromium / Blink), negeren beide de kenmerkwaarde. Met andere woorden, de bestandsnaam blijft ongewijzigd.

Fallback aanbieden

Op het moment van schrijven, de downloaden attribuut is nog niet geïmplementeerd in Safari en (zoals je zou verwachten) Internet Explorer. Zeggen dat, volgens de moderne IE-status, het momenteel bovenaan de ontwikkelingslijst staat en veel stemmen krijgt. 

In de tussentijd kunnen we een goede terugval toevoegen, zoals extra instructies bieden onder de downloadkoppeling voor niet-ondersteunende browsers. Om dit te doen, zullen we Modernizr moeten downloaden met de downloaden functie test inbegrepen.

Dan kunnen we het volgende script toevoegen.

if (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (this) .attr ('download'); if (type van $ download! == type van undefined && $ download! == false) var $ el = $ ( '
') .addClass (' download-instructie '). tekst (' Klik met de rechtermuisknop en selecteer 'Download gekoppeld bestand' '); $ El.insertAfter ($ (this)); );  

Het script zal testen of de browser het ondersteunt downloaden attribuut; zo niet, dan voegt het een nieuw toe 

 met de klasse voor stylingdoeleinden en de instructietekst, en plaats deze onmiddellijk onder elke koppeling die is geleverd met de downloaden attribuut.

De tekstinstructie wordt weergegeven in Safari.

Afsluiten

De downloaden kenmerk maakt het verwerken van downloadkoppelingen erg handig voor iedereen die geen toegang heeft tot de serverconfiguratie. Ik kijk er naar uit dat Internet Explorer en Safari het downloaden kenmerk binnenkort!

Web ontwerp