Download the mandatory download attribute in html5. use instance resolutionhtml5 tutorial skills-

Source: Internet
Author: User
Adding the download attribute to the link allows users to download the file instead of directly opening it in a browser. By now, browsers that support HTML5 have better support for this attribute, next, let's take a closer look at the forced download attribute in HTML5. Download uses instance parsing: the download attribute of HTML5 is used to force the browser to Download the corresponding file instead of opening it. Browsers such as Chrome and Firefox are too powerful. They may be used to enhance the user experience. When the resource files clicked by users can be identified by them (for example, pdf files can be opened directly in the browser, mp3, mp4, and other media can be played directly using the built-in player in the browser ). However, sometimes you want to download the file directly instead of viewing it in the browser. You can add this attribute to rename the downloaded file:
Click Download and save it as a download.pdf file.
If you are sure that the resource will be downloaded by the user, you can add this attribute, and you can also use JS or manually change the file name you want to save.
It is convenient to create a download link in html. Just add a tag and the href attribute pointing to the file. But some files will not be downloaded (such as pdf, txt, doc). On the contrary, they will be opened in the browser.
If your site has a server, you can configure the. htaccess file so that those files can be downloaded. If your website is hosted by or github pages (static pages), use the download attribute of the tag.

Use the "Download" attribute
The download attribute is part of the html5 specification. It represents a download link rather than a navigation link.
The download attribute allows you to rename an object to be downloaded. Upload, We can rename the name of the downloaded file. The file name displayed after the download can be a good name, such as Acme Documentation (ver., like this to increase user experience (do not forget the extension name of the file ).

Copy XML/HTML Code to clipboard

  1. Click Download and save it as a download.pdf file.

Can take a look at this demo address:

For security reasons, Firefox must download the file from its own server or domain name. Otherwise, the file will be opened in the browser.
In Chrome and Opear, if the downloaded file is not in the server or domain name of the subset, these browsers will ignore the download attribute. In other words, the file name remains unchanged.

Provides backup solutions:
When writing this article, the download attribute is not implemented in Safari and IE, but IE claims that the implementation of the download attribute is already at the top of the development agenda.

During this period, we can use a backup solution to be compatible with those browsers. We need to download the download attribute feature test of Modernizr.

Then add the following script:

Copy the content to the clipboard using JavaScript Code

  1. If (! Modernizr. adownload ){
  2. Var $ link = $ ('A ');
  3. $ Link. each (function (){
  4. Var $ download = $ (this). attr ('Download ');
  5. If (typeof $ download! = Typeof undefined & $ download! = False ){
  6. Var $ el = $ ('

    '). AddClass ('Download-instruction'). text ('right-click and select "download Linked File "');

  7. $ El. insertAfter ($ (this ));
  8. }
  9. });
  10. }

This script is used to test whether the browser supports the download attribute. If the browser does not, it will want to insert a download-instruction class under the tag of the download attribute.

Label, and give the text guide to use right-click to download.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.