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


224

J'ai une idée de base du HTML. Je veux 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?


11
La marque d'acceptation de cette question doit être changée.
Pekka

Réponses:


163

Cette réponse est dépassée. Nous avons maintenant l' downloadattribut . (voir aussi ce lien vers MDN )

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

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

le target=_blankfera apparaître une nouvelle fenêtre de navigateur avant le début du téléchargement. Cette fenêtre sera 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 un 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.)


1
pourquoi ne pas utiliser l'attribut download, si vous obtenez un fichier comme un jpg, il sera téléchargé, au lieu de simplement s'ouvrir.
Ben

2
Veuillez omettre le "target = '_ blank'", car cela ne fonctionnera pas dans IE. L'avez-vous même testé?
Tara

4
@Dudeson veuillez préciser ce qui "ne fonctionnera pas" et la ou les versions d'IE dont vous parlez. (Cependant, il est désormais possible d'utiliser l'approche décrite ci-dessous dans la réponse beaucoup plus récente de TIIUNDER. Elle devrait obtenir la note d'acceptation.)
Pekka

2
@Sergiu, la réponse a sept ans. Je ne peux pas le supprimer, et le demandeur n'a pas répondu à ma demande de changer la marque d'acceptation ... rien que nous pouvons faire, bien que j'ajoute un lien vers la réponse la plus récente
Pekka

1
@Dani voir la réponse de TIIUNDER ci-dessous, qui est la bonne maintenant.
Pekka

455

Dans les navigateurs modernes qui prennent en charge HTML5, ce qui suit est possible:

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

Vous pouvez également 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.


j'ai utilisé le même code pour télécharger le fichier PFD et j'ai testé dans tous les navigateurs tous sont pris en charge, mais dans safari ce code ne fonctionne pas safari au lieu de télécharger le fichier pdf ouvert dans un nouvel onglet.
Renish Khunt

6
caniuse.com/#search=download%20attribute Fonctionne dans Chrome, Edge, Firefox, Opera et les derniers navigateurs Android 4.4+, et non dans Internet Explorer et Safari.
Bart Verkoeijen

Comment faire si je crée le lien dynamiquement sur un clic de bouton?
Nongthonbam Tonthoi

1
@NongthonbamTonthoi ne peux pas utiliser javascript pour affecter dynamiquement le href à la balise a
akshay kishore

1
Cela ne fonctionnera pas nécessairement, car il est limité aux URL de même origine.
Nathan

22

En plus (ou en remplacement) de l' <a downloadattribut HTML5 déjà mentionné,
le comportement de téléchargement du navigateur 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 façon de faire avant HTML5 (et fonctionne toujours avec les navigateurs prenant en charge HTML5).


4
Mais cela nécessite une implémentation côté serveur, n'est-ce pas?
Lombas

@Lombas oui, seul le serveur peut définir les en-têtes de réponse http.
Myobis

Est-ce la réponse complète? Vous devez également envoyer un en-tête de type de contenu et lire le fichier pour forcer le téléchargement. Peut vouloir et que votre réponse. Réponse complète ici: stackoverflow.com/a/1465631/2757916 .
Govind Rai,

c'est parfait pour l'implémentation côté serveur, juste précis aussi le type de contenu. il est bien pris en charge par rapport à l' downloadattribut
william.eyidi

9

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 tout autre lien serait:

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

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

8

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

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

Pour forcer les choses à télécharger même si elles ont un plugin intégré (Windows + QuickTime = ugh), vous pouvez l'utiliser dans votre htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Merci! c'est beaucoup plus simple et à l'échelle du serveur! : DI a trouvé ce lien qui élabore un peu plus. Je vous remercie. htaccess-guide.com/adding-mime-types
Joe DF

Tous les fichiers de ce type seront téléchargés uniquement. Très bien si c'est ce que vous voulez, mais pourrait provoquer des ajustements si vous oubliez et souhaitez qu'un autre fichier de ce type s'affiche dans le navigateur au lieu du téléchargement.
TecBrat

4

Ce fil est probablement ancien maintenant, mais cela fonctionne en html5 pour mon fichier local.

Pour les fichiers PDF:

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

Cela devrait ouvrir le pdf dans une nouvelle fenêtre et vous permettre de le télécharger (au moins dans Firefox). Pour tout autre fichier, faites-en simplement le nom de fichier. Pour les images et la musique, vous souhaitez 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>

2

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 vers un site distant. L'exemple d'Odin ne fonctionne donc pas sur Firefox 41.0.2.


1

Il y a encore une subtilité qui peut aider ici.

Je veux avoir des liens qui permettent à la fois la lecture et l'affichage dans le navigateur, ainsi qu'un autre pour le téléchargement pur. Le nouvel attribut de téléchargement est correct, mais ne fonctionne pas tout le temps car la contrainte du navigateur pour lire ou afficher le fichier est toujours très forte.

MAIS .. ceci est basé sur l'examen de l'extension sur le nom de fichier de l'URL! Vous ne voulez pas jouer avec le mappage d'extension du serveur parce que vous voulez livrer le même fichier de deux manières différentes. Donc, pour le téléchargement, vous pouvez le tromper en associant le fichier à un nom opaque à ce mappage d'extension, en le pointant, puis en utilisant la fonction de renommage du téléchargement pour corriger le nom.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

J'espérais simplement lancer une requête factice à la fin ou obscurcir l'extension fonctionnerait, mais malheureusement, cela ne fonctionne pas.


0

L'attribut de téléchargement est nouveau pour la <a>balise 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 à toute extension.


0

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 en raison de l'autorisation «allow-popups» non 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 en raison 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>


-3

Comme ça

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

Ainsi, un fichier name.jpg sur un site example.com ressemblerait à ceci

<a href="www.example.com/name.jpg">Image</a>

Le problème avec ce dernier est qu'il s'ouvrira dans le navigateur, ne sera pas proposé au téléchargement et à la sauvegarde.
Pekka

9
Ne fonctionnera pas; le navigateur le traitera comme un lien relatif vers ./www.example.com/name.jpg- vous devez utiliser http://pour les liens absolus avec le domaine spécifié.
Delan Azabani

-7

je sais que je suis en retard mais c'est ce que j'ai obtenu après 1 heure de recherche

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

et pour le lien téléchargeable je l'ai fait

<a href="index.php?file=file.pdf">Download PDF</a>

6
C'est terrible. Quand je vois un tel lien de téléchargement, je dois résister à l'envie d'essayer index.php? File = index.php qui, dans une implémentation copier / coller de votre code, donnerait éventuellement à une personne malveillante l'accès à votre base de données et qui sait quoi.
M.Stramm

1
Mauvaise idée. D'abord parce que vous faites fonctionner votre serveur plus que nécessaire. Deuxièmement, parce que les utilisateurs peuvent télécharger n'importe quel fichier: p
José Neto
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.