コーディングでファイルをダウンロードさせるにはどうしたらいいの？
会社のホームページなどで、資料などをダウンロードできるようにしたい場合があると思います。
今回は、HTMLのaタグで簡単にファイルをダウンロードさせることができる、download属性の使い方を解説します。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
ファイルをダウンロードさせるaタグのdownload属性の使い方
早速ですが、コードはこちらになります。
<a href="ファイルのパス" download="ファイル名">ダウンロードする</a>
href属性
href属性のファイルのパスは、絶対パスでも相対パスでもOKです。
<!-- 絶対パス -->
<a href="https://junpei-sugiyama.com/wp-content/uploads/sample.pdf" download="ファイル名">ダウンロードする</a>
<!-- 相対パス -->
<a href="../file/sample.pdf" download="ファイル名">ダウンロードする</a>
download属性
download属性には、ファイル名を入れます。
これは、実際のファイル名ではなく、ダウンロードされた時のファイル名になります。
そして、空欄であれば実際のファイル名でダウンロードされます。
<!-- ダウンロードされるファイル名は『sample.pdf』 -->
<a href="../file/sample.pdf" download="sample.pdf">ダウンロードする</a>
<!-- ダウンロードされるファイル名は『サンプル.pdf』 -->
<a href="../file/sample.pdf" download="サンプル.pdf">ダウンロードする</a>
<!-- ダウンロードされるファイル名は『sample.pdf』 -->
<a href="../file/sample.pdf" download="">ダウンロードする</a>
<a href="../file/sample.pdf" download>ダウンロードする</a>拡張子は実際と違うもの書くとそれになってしまうので、ご注意下さい（拡張子は書かなくてもOK）
download属性が効かない原因
もしダウンロードができない場合は、以下の原因が考えられます。
- ファイルのパスが間違えている
- ファイルが消えている
- 同一オリジンではない
3つ目の『同一オリジンではない』ですが、これはWebサイトとファイルの場所が同じサーバーの同じドメインの必要があるということです。
つまり、他人のサイトのファイルをダウンロードできるようにはできないということですね。
まとめ
今回は、aタグのdownload属性の使い方を解説しました。
ファイルのダウンロードはWeb制作でもたまにある実装なので、覚えておきましょう。
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
