Introduction détaillée à l'attribut download en HTML5

L'ajout de l'attribut de téléchargement au lien permet aux utilisateurs de télécharger le fichier au lieu de l'ouvrir directement avec le navigateur. Jusqu'à présent, les navigateurs prenant en charge HTML5 prennent en charge cet attribut de plus près. Exemples d'utilisation de l'attribut de téléchargement forcé download en HTML5 :

L'attribut Download de HTML5 est utilisé pour forcer le navigateur à télécharger le fichier correspondant au lieu de l'ouvrir. Les navigateurs tels que Chrome et Firefox sont trop puissants, peut-être pour améliorer l'expérience utilisateur lorsque le fichier de ressource sur lequel l'utilisateur a cliqué peut être reconnu par eux (par exemple, le pdf sera ouvert directement dans le navigateur, et les médias tels que mp3 et mp4. sera joué directement dans le navigateur) lecture du lecteur). Mais parfois, les utilisateurs souhaitent le télécharger directement au lieu de le visualiser sur le navigateur. Dans ce cas, ils peuvent ajouter cet attribut, et la valeur de l'attribut renommera le fichier téléchargé :
Cliquez pour télécharger directement et enregistrez-le en tant que fichier download.pdf
Si vous êtes sûr que l'utilisateur téléchargera certainement cette ressource, vous pouvez ajouter cet attribut, et vous Vous pouvez également utiliser JS ou modifier manuellement le nom du fichier que vous souhaitez enregistrer.
Il est pratique de créer un lien de téléchargement en HTML. Ajoutez simplement une balise et un attribut href pointant vers le fichier. Mais certains fichiers ne seront pas téléchargés (comme les images, pdf, txt, doc), mais seront ouverts dans le navigateur.
Si votre site est côté serveur, vous pouvez configurer le fichier .htaccess afin que ces fichiers puissent être téléchargés. Si votre site est hébergé par WordPress.com ou une page github (page statique), alors pensez à utiliser l'attribut download de la balise

Utilisez l'attribut "Télécharger"
download fait partie de la spécification HTML5 et apparaît sous la forme d'un lien de téléchargement et non d'un lien de navigation. L'attribut de téléchargement vous permet également de renommer un fichier qui doit être téléchargé. Par exemple, un fichier est stocké sur le serveur. Si le fichier est généré automatiquement, il est généralement nommé comme une combinaison de numéros de système et de tirets, comme acme-doc-2.0.1.txt. Nous pouvons le renommer Le nom de. le fichier téléchargé. Le nom du fichier que les utilisateurs voient après le téléchargement peut être un meilleur nom, tel que Acme Documentation (ver. 2.0.1).txt, pour améliorer l'expérience utilisateur comme celle-ci (n'oubliez pas l'extension du fichier).

XML/HTML CodeCopier le contenu dans le presse-papier

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

Vous pouvez jeter un œil à cette adresse de démonstration : http://tutsplus.github.io/download-attribute/index.html

Quelques notes :
Firefox considère sécurité Problème, le fichier téléchargé doit provenir de votre propre serveur ou nom de domaine, sinon il sera ouvert dans le navigateur. Dans Chrome et Opear, si le fichier téléchargé ne fait pas partie d'un sous-ensemble de serveurs ou de noms de domaine, ces navigateurs ignoreront l'attribut de téléchargement. En d'autres termes, le nom du fichier ne changera pas.

Fournir un plan de sauvegarde :
Au moment de la rédaction de cet article, l'attribut de téléchargement n'est pas implémenté dans Safari et IE, mais IE affirme que l'implémentation de l'attribut de téléchargement est déjà en tête de l'agenda du développement.

En attendant, nous pouvons utiliser une solution de secours pour être compatible avec ces navigateurs. Nous devons télécharger le test des fonctionnalités d'attribut de téléchargement de Modernizr.

Ajoutez ensuite le script suivant :

JavaScript CodeCopier le contenu dans le presse-papier

1. if ( ! Modernizr.adownload ) {   
       var $link = $('a');   
       $link.each(function() {   
           var $download = $(this).attr('download');   
           if (typeof $download !== typeof undefined && $download !== false) {   
         var $el = $(&#39;<p>&#39;).addClass(&#39;download-instruction&#39;).text(&#39;Right-click and select "Download Linked File"&#39;);   
         $el.insertAfter($(this));   
           }   
       });   
   }

Ce script permet de tester si le navigateur prend en charge l'attribut de téléchargement. Si le navigateur ne le prend pas en charge, il voudra avoir l'attribut de téléchargement avec la classe d'instructions de téléchargement et donnez les instructions textuelles à télécharger en cliquant avec le bouton droit.

[Recommandations associées]

1

Tutoriel vidéo en ligne h5 gratuit

2

Explication détaillée du HTML5. Attributs du nouveau formulaire

3.

Tutoriel vidéo html5 original php.cn

4.

attribut classList en HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!