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

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?

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.)

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.

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).

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>

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

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>

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.

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.

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.

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>

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>

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>