HOW TO USE THE DOWNLOAD ATTRIBUTE

By kaimbi | WEB DEVELOPMENT | 0 comment | 27 July, 2015 | 0

HTML5 got here with all new APIs, new enter sorts and attributes for varieties. As is usually the case, these main additions typically obscure the minor upgrades and I suppose that that is notably true of the obtain attribute.

As , there are some recordsdata that the browser doesn’t mechanically obtain; photos, different internet pages and relying on the settings in your browser, typically even PDFs. The obtain attribute offers the browser a local method to obtain these recordsdata robotically, with out having to fall again on JavaScript. This is de facto helpful for any app that offers with the downloading of pictures, corresponding to picture add websites.

USING THE DOWNLOAD ATTRIBUTE

Since the obtain attribute doesn’t use scripts of any form, it’s so simple as including the attribute to your hyperlink:

<a href="myFolder/myImage.png" obtain>Download picture</a>

What’s nice about this attribute is that you would be able to even set a reputation for the downloadable file, even when it’s not the identify in your server. This is nice for websites with advanced file names, and even dynamically created photographs, that need to present a easy and consumer-pleasant file title. To present a reputation, you simply add an equals signal, adopted by the title you need to use surrounded in quotes, like so:

<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" obtain="myImage">Download picture</a>

Note that the browser will robotically add the proper file extension to the downloaded file, so that you don’t want to incorporate that inside your attribute worth.

BROWSER SUPPORT

Currently, solely Chrome 14+ and Firefox 20+ assist the obtain attribute, so you might must fall again on some easy JavaScript to detect if the attribute is supported. You can accomplish that like this:

var a = doc.createElement('a');

if(typeof a.obtain != "undefined")

   // obtain attribute is supported

else

  // obtain attribute isn't supported

CONCLUSION

Taking into consideration every little thing that has been added to HTML5, the obtain attribute is a really small half, however for my part it’s an attribute that was lengthy overdue, and undoubtedly has its makes use of in at this time’s apps for each usability and simplification.

Have you applied the obtain attribute? What are your unsung heroes of HTML5? Let us know within the feedback.

HOW TO USE THE DOWNLOAD ATTRIBUTE