HTMLで対象ファイルをダウンロードする方法 download 属性の使い方

HTMLでダウンロードリンクを作るには次のように記述します。

<a href="sample.txt">sample.txt</a>

すると、a 要素の間に書いた sample.txt という記述がリンクになって表示されます。そのリンクをクリックするとhref属性に記述した sample.txt を取得してダウンロードします。このときダウンロードされるファイル名はダウンロード対象と同様になります。

HTML5では download 属性が追加されました。download属性はダウンロード時のファイル名を指定することが出来ます。上記のソースコードにdownload属性を追加して任意の名前でダウンロードさせるには次のように書きます。

<a href="sample.txt" download="test.txt">sample.txt</a>

ここでは test.txt としてダウンロードされます。

実際に動かしてみましょう。ソースコードは download 属性有りと無しを準備します。

<!DOCTYPE html>
<html>
<head>
<title>download-test</title>
</head>
<body>
  <p>
    <a href="sample.txt">sample.txt</a>
  </p>
  <p>
    <a href="sample.txt" download="test.txt">sample.txt</a>
  </p>
</body>
</html>

Webサーバー上で動作させて、ブラウザ表示させると次のようになります。

それぞれクリックしてみます。まずは上のリンクから、これは download 属性無しの方です。

ダウンロード対象のファイル名と同様の名前でダウンロードされますね。

では次に下のリンク、download属性有りの方をクリックしてみましょう。

download属性で指定した test.txt としてダウンロードされますね。

私はこの仕組みを使って時短をした経験は無いです。時短できる使い方を考えてみると、いつどのユーザーがダウンロードしたか分かるようにdownload属性を使うのが良いのかなと思います。download属性を動的に設定する仕組みを作れば出来るかと思います。

Let's share SNS