HTML 指定した名前でファイルをダウンロードさせる方法

2018/10/10 HTML

HTMLを使用して、指定した名前でファイルをダウンロードさせる方法をご紹介します。

 

ダウンロードリンク作成

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

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

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

 

download属性を付与する

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属性有り

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

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

 

まとめ

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