HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのハイパーリンクをクリックしたときにファイルをダウンロードさせる方法

download属性を使ったダウンロードの指定方法

ハイパーリンクをクリックした際に、リンク先のファイルをブラウザで表示せずにダウンロードさせたい場合は、<a>タグにdownload属性を指定します。

download属性の値には、ダウンロード時に保存されるファイル名を設定できます。たとえば、画像ファイルをダウンロードさせる場合などに便利です。なお、属性の値を省略した場合は、元のファイル名がそのまま使用されます。

ポイント

  • download属性は<a>タグでのみ有効です。
  • 同一オリジン（同じドメイン内）のURLに対して機能します。別ドメインのリソースについては、ブラウザによって挙動が異なる場合があります。
  • 値を指定すると、その名前でファイルが保存されます。

サンプルコード

以下は、画像をクリックするとJPEGファイルがダウンロードされる例です。

<!DOCTYPE html>
<html>
   <body>
      <h3>Javaのif文</h3>
      <p>以下はJavaのif文の概念を説明する画像です（クリックでダウンロード）：</p>

      <a href="https://www.tutorialspoint.com/java/images/if_statement.jpg" download>
         <img border="0" src="https://www.tutorialspoint.com/java/images/if_statement.jpg" alt="Java" width="400" height="450">
      </a>
   </body>
</html>

このように、download属性を追加するだけで、ユーザーがリンク（ここでは画像）をクリックしたときに、自動的にファイルがダウンロードされるようになります。ファイル名を指定したい場合は、download="任意のファイル名.jpg"のように記述します。

  1. HTMLのtarget属性の使い方を徹底解説！リンクの開き方を制御する方法

    target属性とは target属性は、ユーザーがリンクをクリックした際に、そのリンクをどこで開くかを指定するためのHTML属性です。 例えば、以下のようなリンクをクリックすると、現在表示しているのと同じブラウザタブ（ウィンドウ）でリンク先のページが開きます。 <a href=https://techstacker.com/>トップページへのリンク</a> つまり、別のウェブサイトへのリンクを設置した場合、ユーザーはあなたのサイトから離れ、リンク先のサイトへ移動してしまうのです。これは意図した挙動の場合もあれば、そうでない場合もあります。 デフォルトでは「_self」

  2. HTMLでリンクのターゲット（開き先）を変更する方法【target属性の使い方】

    HTMLでリンクのターゲット（開き先）を変更するには、<a>〜</a>タグのtarget属性を使用します。target属性を指定することで、リンク先を新しいタブで開いたり、同じタブで開いたりと、ページの表示方法を柔軟に制御できます。 target属性に指定できる値 属性値説明 _blankリンク先のページを新しいタブで開きます。 _selfリンク先のページを現在のタブ（同じフレーム）で開きます。省略時のデフォルト値です。 _parentリンク先のページを親フレームで開きます。 _topリンク先のページを最上位のフレームで開きます。フレーム構成を解除して全画面表示