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

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 WordPress.com 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. 2.0.12.16.txt, 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: http://tutsplus.github.io/download-attribute/index.html

Note:
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.