HTMLでダウンロードリンクを作成するにはどうすればよいですか？

HTMLの基本的な考え方があります。サンプルWebサイトにダウンロードリンクを作成したいのですが、作成方法がわかりません。ファイルにアクセスするのではなく、ファイルをダウンロードするリンクを作成するにはどうすればよいですか？

この回答は古くなっています。これでdownload属性ができました。（MDNへのこのリンクも参照してください）

「ダウンロードリンク」とは、ダウンロードするファイルへのリンクを意味する場合は、

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

これによりtarget=_blank、ダウンロードが始まる前に新しいブラウザウィンドウが表示されます。ブラウザがリソースがファイルのダウンロードであることを検出すると、通常、そのウィンドウは閉じられます。

ブラウザが認識しているファイルタイプ（JPGまたはGIF画像など）は通常、ブラウザ内で開かれることに注意してください。

ここに概説されているように、正しいヘッダーを送信してダウンロードを強制することができます。（そのためには、サーバー側スクリプトまたはサーバー設定へのアクセスが必要です。）

HTML5をサポートする最新のブラウザーでは、次のことが可能です。

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

これを使用することもできます：

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

これにより、実際にダウンロードされるファイルの名前を変更できます。

<a download前述のHTML5の属性に加えて（または代わりに）
、ブラウザーのディスクへのダウンロード動作は、次のhttp応答ヘッダーによってトリガーすることもできます。

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

これはHTML5より前の方法でした（HTML5をサポートするブラウザーでも動作します）。

ダウンロードリンクは、ダウンロードするリソースへのリンクになります。他のリンクと同じように構成されます。

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

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

ファイルにリンクするには、他のページリンクと同じようにします。

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

プラグインが組み込まれている場合でも（Windows + QuickTime = ugh）ダウンロードを強制するには、これをhtaccess / apache2.confで使用できます。

AddType application/octet-stream EXTENSION

このスレッドはおそらく古くなっていますが、これはローカルファイルのhtml5で動作します。

PDFの場合：

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

これにより、PDFが新しいウィンドウで開き、（少なくともFirefoxで）ダウンロードできるようになります。その他のファイルの場合は、ファイル名にします。画像と音楽の場合は、サイトと同じディレクトリに保存する必要があります。だからそれは

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

ダウンロード属性はIEでは機能せず、「ダウンロード」を完全に無視します。hrefがリモートサイトを指している場合、ダウンロードはFirefoxでは機能しません。したがって、Odinの例はFirefox 41.0.2では機能しません。

ここで役立つ微妙な点がもう1つあります。

ブラウザ内での再生と表示の両方を可能にするリンクと、純粋にダウンロードするためのリンクが欲しい。新しいダウンロード属性は問題ありませんが、ブラウザでファイルを再生または表示したいという衝動が依然として非常に強いため、常に機能するとは限りません。

しかし、これはURLのファイル名の拡張子を調べることに基づいています！同じファイルを2つの異なる方法で配信したいので、サーバーの拡張子マッピングをいじる必要はありません。そのため、ダウンロードの場合は、この拡張マッピングに対して不透明な名前にファイルをソフトリンクし、それをポイントして、ダウンロードの名前変更機能を使用して名前を修正することで、ファイルをだますことができます。

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

最後にダミーのクエリをスローするか、拡張機能を難読化するとうまくいくことを望んでいましたが、残念ながらそれはできません。

<a>HTML5 のタグのダウンロード属性が新しくなりました

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

私は最初の方が任意の拡張子に関して好ましいです。

あなたは私の方法に従うことができるさまざまな方法でダウンロードすることができます。「allow-popups」権限が設定されていないためファイルがダウンロードされない可能性がありますが、ご使用の環境では、これは完全に機能します

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

もう1つは、「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>

このような

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

したがって、サイトexample.comのファイルname.jpgは次のようになります。

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

私は遅れていることを知っていますが、これは1時間の検索後に得たものです

 <?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); }
    }

    ?>

そしてダウンロード可能なリンクのために私はこれをしました

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