HTMLのa要素のリンクをクリックしたらファイルをダウンロードすることができるダウンロードリンクが作れるのを最近知りました…
いったいどのようにするとリンクをクリックしたらファイルをダウンロードできるようにすることができるのか、zipファイルをダウンロードできるようにするやり方をサンプルにして覚えておこうと思います。
HTMLでダウンロードリンクを作成
HTMLでダウンロードリンクを作成するには、aタグとhref属性、そしてHTML5から登場したdownload属性を使用します。
<a href="zipbox/smple.zip03" download="smple.zip">ダウンロードリンク</a>
- href属性にダウンロードするファイルのパスを書く
- download属性の値にダウンロードするときのファイル名を拡張子つきで書く
上記のHTMLの書き方がダウンロードリンクを作成するもっとも良いと思える書き方です。
HTMLのaタグでダウンロードリンクの作成は2パターンあります。
aタグにdownload属性の記述をしない場合とdownload属性を記述をした場合のダウンロードリンクです。
2パターンのダウンロードリンクを作って実際にクリックしてダウンロードしてみた結果は、やはりdownload属性ありのダウンロードリンク推しです。
それでも2つのダウンロードリンク作成を覚えておくと理解が深まったので、その辺も含めて説明を続けます。
aタグとhref属性でリンクを作成
HTMLのaタグとhref属性でリンク作成してhref属性の値にリンクしたいファイルまでのパスを指定すると、パス指定したファイルがリンクの移動先にできるのが基本的なリンク作成です。
<a href="smple03.zip">ダウンロードリンク</a>
このときのリンク作成のパスをzipファイルまでのパスで指定するとa要素のリンクテキストをクリックしたらブラウザでzipファイルをダウンロードできるダウンロードリンクになります。
ただしリンクをクリックしたらダウンロードされるzipファイル名がhref属性で指定したファイル名のままダウンロードされることになります。
また今後zipファイル以外、例えばPDFをダウンロードする必要があった場合、ダウンロードリンクをクリックしたらブラウザでPDFが表示してからダウンロードする手順になってしまいます。
そのためaタグとhref属性でダウンロードリンクの作成をしてる場合は、download属性もaタグに記述して作成するのが良いです。
download属性もaタグに記述
HTMLのdownload属性をaタグに記述して作成したダウンロードリンクもリンクをクリックしたら、zipファイルをダウンロードさせることができます。
<a href="zipbox/smple03.zip" download="smple.zip">ダウンロードリンク</a>
download属性を付与した場合のダウンロードリンクは、aタグとhref属性でリンクを作成した場合と違い、ダウンロードするファイル名をリネームできます。
例えばhref属性だけで指定したzipファイル名が「smple03.zip」の場合、ダウンロードリンクをクリックしたらファイル名が「smple03.zip」でダウンロードされます。
一方でdownload属性の値にsmple.zipも記述したダウンロードリンクの場合。
download属性の値で指定したファイル名にリネームしてダウンロードできます。
複数のダウンロードファイルをフォルダ管理していて、番号をつけているなど、実際にダウンロードしてもらうときには番号なしのシンプルなファイル名にリネームすることができるので便利かと思えます。
またdownload属性を指定したダウンロードリンクで作成すると、zipファイル以外の例えばPDFは、ブラウザで表示する前にダウンロードリンクをクリックしたらダウンロードを促すことができます。
zipファイルをダウンロードしてみる
実際にダウンロードリンクをクリックしたらzipファイルをダウンロードできるか確認してみることにします。
<div class="link__wrap">
<a href="zipbox/smple03.zip" download="smple.zip">ダウンロードボタン</a>
</div>
ダウンロードリンクは上のHTMLで作成しました。そしてダウンロードリンクを少しCSSでごにょごにょしてダウンロードリンクボタンにしてダウンロードしてみることに。
Chromeでzipファイルをダウンロード
上の画像はChromeブラウザをMacで開いたダウンロードリンクの場合です。
ダウンロードボタンをクリックしたらdownload属性に記述したzipァイル名でダウンロードできます。
Safariでzipファイルをダウンロード
ブラウザのSafariをMacで開いたダウンロードリンクの場合です。ダウンロードボタンをクリックしたら「ダウンロードを許可しますか？」と問われるので許可。
そうするとdownload属性に記述したフzipァイル名でダウンロードできます。
Firefoxでzipファイルをダウンロード
ブラウザをFirefoxにしてMacで開いたダウンロードリンクの場合です。
ダウンロードリンクをクリックしたら、「ファイルを開く」「ファイルを保存する」か聞かれるので「ファイルを保存」にしてOKします。
そうするとHTMLで作成したダウンロードリンクのdownload属性に記述したzipァイル名でダウンロードできます。
IEでzipファイルをダウンロード
IEのブラウザをWindowsで開いた場合です。ダウンロードリンクをクリックしたら、ファイルを「開く」「保存」「名前をつけて保存」の選択を迫られます。
「保存」を選びます。
なんかdownload属性に記述したフzipァイル名で保存してくれなさそうな気配がしますね。
保存を選択するとzipファイルをダウンロードすることができました。
ですがHTMLのdownload属性に記述したzipファイルにリネームはできませんでした。ブラウザごとに違いがあるのだろうと思うことにしてスルー。
こっ..このようにダウンロードリンクを作成した後には、各ブラウザでリンクをクリックしたらどんな手順でダウンロードすることができるのか確認しておくといいです。
ブラウザごとの違いを理解しやすくなりますね。
まとめ
ダウンロードリンクは難しくないHTMLの書き方で作成が可能なのでzipファイルをダウンロードできるようにしたいときには時間をかけずに実装できると思います。
それにダウンロードリンクを画像にする場合にも、download属性ありのダウンロードリンクにしてimgタグを包み込んであげればればいいので、扱いやすいHTMLだと思えます。
