web-dev-qa-db-fra.com

Comment créer un lien de téléchargement en HTML?

J'ai une idée de base du HTML. Je souhaite créer le lien de téléchargement dans mon exemple de site Web, mais je ne sais pas comment le créer. Comment créer un lien pour télécharger un fichier plutôt que de le visiter?

htmldownload
201
Venkat

Cette réponse est obsolète. Nous avons maintenant l'attribut download comme décrit ici .

Si par "le lien de téléchargement" vous entendez un lien vers un fichier à télécharger, utilisez

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

le target=_blank fera apparaître une nouvelle fenêtre de navigateur avant le début du téléchargement. Cette fenêtre est généralement fermée lorsque le navigateur découvre que la ressource est un téléchargement de fichier.

Notez que les types de fichiers connus du navigateur (par exemple, les images JPG ou GIF) seront généralement ouverts dans le navigateur.

Vous pouvez essayer d’envoyer les bons en-têtes pour forcer le téléchargement, comme indiqué par exemple. ici . (Un script côté serveur ou un accès aux paramètres du serveur est requis pour cela.)

145
Pekka 웃

Dans les navigateurs modernes prenant en charge HTML5, les opérations suivantes sont possibles:

<a href="link/to/your/download/file" download>Download link</a>

Vous pouvez aussi utiliser ceci:

<a href="link/to/your/download/file" download="filename">Download link</a>

Cela vous permettra de changer le nom du fichier en cours de téléchargement.

420
Felix G.

En plus (ou en remplacement) à l'attribut <a download de HTML5 déjà mentionné,
Le comportement du navigateur téléchargement sur le disque peut également être déclenché par l'en-tête de réponse http suivant:

Content-Disposition: attachment; filename=ProposedFileName.txt;

C'était la méthode à suivre avant HTML5 (et fonctionne toujours avec les navigateurs prenant en charge HTML5).

20
Myobis

Un lien de téléchargement serait un lien vers la ressource que vous souhaitez télécharger. Il est construit de la même manière que n'importe quel autre lien serait:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>
9
Oded

Pour créer un lien vers le fichier, procédez comme tout autre lien de page:

<a href="...">link text</a>

Pour forcer le téléchargement d'éléments même s'ils ont un plugin intégré (Windows + QuickTime = ugh), vous pouvez l'utiliser dans votre htaccess/Apache2.conf:

AddType application/octet-stream EXTENSION
8
Delan Azabani

Ce fil est probablement ancien à présent, mais cela fonctionne en html5 pour mon fichier local.

Pour les pdfs:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

Cela devrait ouvrir le fichier pdf dans une nouvelle fenêtre et vous permettre de le télécharger (au moins dans Firefox). Pour tout autre fichier, indiquez simplement le nom du fichier. Pour les images et la musique, vous souhaiterez cependant les stocker dans le même répertoire que votre site. Donc ce serait comme

<p><a href="images/logo2.png" download>test pdf</a></p>
3
johan

L'attribut de téléchargement ne fonctionne pas dans IE, il ignore complètement le "téléchargement". Le téléchargement ne fonctionne pas sur Firefox si le href pointe sur un site distant. Ainsi, l'exemple d'Odin ne fonctionne pas sur Firefox 41.0.2.

1
Bill Coffin

Vous pouvez télécharger de différentes manières, vous pouvez suivre mon chemin. Bien que les fichiers ne puissent pas être téléchargés car l’autorisation "allow-popups" n’est pas définie, mais dans votre environnement, cela fonctionnera parfaitement.

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

un autre celui-ci échouera également à cause de 'X-Frame-Options' à 'sameorigin'.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
0
anik islam Shojib

L'attribut download est nouveau pour la balise <a> en HTML5.

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
ou
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Je préfère le premier il est préférable en ce qui concerne toute extension.

0
Odin