コーディングでファイルをダウンロードさせるにはどうしたらいいの？
会社のホームページなどで、資料などをダウンロードできるようにしたい場合があると思います。
今回は、HTMLのaタグで簡単にファイルをダウンロードさせることができる、download属性の使い方を解説します。
Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう！
ファイルをダウンロードさせる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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
