Shulou(Shulou.com)06/03 Report--

This article shows you how to force the use of the download attribute download in HTML5, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The Download property 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, perhaps to enhance the user experience, when the resource files clicked by users can be recognized by them (for example, pdf will be opened directly in the browser, mp3, mp4 and other media will be directly played by the browser built-in player). But sometimes, when the user actually wants to download it directly instead of looking at it on the browser, you can add this attribute, and the property value will rename the downloaded file:

Click to download directly and save as a download.pdf file

If you are sure the resource will be downloaded by the user, you can add this attribute, and you can use JS or manually change the name of the file you want to save.

It is convenient to create a download link in html, just add a tag and a href attribute that points to the file. But some files will not be downloaded (such as images, pdf,txt,doc). Instead, they will be opened in the browser.

If your site is server-side, you can make those files downloadable by configuring .htaccess files. If your site is hosted by WordPress.com or github pages (static pages), consider using the download attribute of the tag lightly

Use the "Download" attribute

The download attribute, which is part of the html5 specification, is represented as a download link, not a navigation link.

The download attribute also allows you to rename a file that needs to be downloaded. For example, if a file is stored on the server, if the file is automatically generated, it is generally named as a combination of a system number and a dash, such as acme-doc-2.0.1.txt, we can rename the name of the downloaded file, and the file name that users see after download can be a better name, such as Acme Documentation (ver. 2.0.1) .txt to increase the user experience like this (don't forget the file extension).

XML/HTML Code copies content to the clipboard

Click to download directly and save as a download.pdf file

You can take a look at this demo address: http://tutsplus.github.io/download-attribute/index.html

Some notes:

Firefox for security reasons, the download file must be from its own server or domain name, otherwise it will be opened in a browser.

In Chrome and Opear, if the download file is not on a subset of the server or domain name, these browsers ignore the download attribute, in other words, the file name remains the same.

Provide backup options:

At the time of this writing, 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 schedule.

In the meantime, we can use a backup scheme to be compatible with those browsers. We need to download the download attribute feature test for Modernizr.

Then add the following script:

JavaScript Code copies content to the clipboard

If (! Modernizr.adownload) {var $link = $('a'); $link.each (function () {var $download = $(this) .attr ('download'); if (typeof $download! = = typeof undefined & & $download! = = false) {var $el = $('). AddClass ('download-instruction'). Text (' Right-click and select "Download Linked File'); $el.insertAfter ($(this)) });}

This script is to test whether the browser supports the download attribute. If the browser does not support it, it will want to insert a tag with the download-instruction class under the tag with the download attribute, and give the text instructions to use the right button to download.

The above is how to force the download attribute download to use in HTML5. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.