Webページ上に「ファイルをダウンロードできるリンクを設置したい」という場面があるかと思います。
主に製品のマニュアルが記載されたPDFや、画像などのアセットを配布したいときなどによく使われますね。
こういったダウンロードリンクを作成するには、aタグのdownload属性を使用するだけで簡単に実装できます！
今回の記事では、
aタグのdownload属性の記述方法download属性を使用する際の注意点
これらについて説明していきますので、ダウンロードするリンクを作成したい方はぜひ参考にしてみてください。
aタグのdownload属性の記述方法
まずはダウンロードリンクの書き方をみていきましょう。
以下がダウンロードリンクの完成版のコードです。
<a href="./pdf/sample.pdf" download="sample.pdf">クリックでダウンロード</a>作成する上でのポイントは、以下の2つです。
href属性にダウンロードさせたいファイルへのパスを記入download属性にファイル名を記入
それぞれ説明していきますね。
作成手順1. href属性にファイルへのパスを記入する
href属性には、ダウンロードさせたいファイルのパスを入力します。
パスの指定方法は、相対パスでも絶対パスでもどちらでも構いません。
<!-- 相対パスで指定した例 -->
<a href="./pdf/sample.pdf" download="sample.pdf">クリックでダウンロード</a>
<!-- 絶対パスで指定した例 -->
<a href="https://yoursite.com/pdf/sample.pdf" download="sample.pdf">クリックでダウンロード</a>作成手順2. download属性にダウンロード時のファイル名を指定する
続いてdownload属性には、ダウンロードした時のファイルの名前を指定します。
もしdownload属性が空の場合は、ファイルが持つ名前がそのまま反映されます。
ファイル名を指定する場合
<!-- 例1) ダウンロード時のファイル名がsample.pdfになる -->
<a href="./pdf/sample.pdf" download="sample.pdf">クリックでダウンロード</a>
<!-- 例2) ダウンロード時のファイル名がexample.pdfになる -->
<a href="./pdf/sample.pdf" download="example.pdf">クリックでダウンロード</a>上記の例のように、本来のファイル名を指定することもできますし、ダウンロード時にファイル名を変更したい場合は任意の名前を指定することもできます。
例1では元のファイル名もダウンロード時の名前もsample.pdfなので、sample.pdfとしてダウンロードされます。
例2では、元のファイル名はsample.pdfですが、download属性にはexample.pdfを指定しているので、ダウンロード時にはexample.pdfとして保存されます。
ファイル名を指定しない場合
<!-- ダウンロード時のファイル名がsample.pdfになる -->
<a href="./pdf/sample.pdf" download="">クリックでダウンロード</a>
<!-- ダウンロード時のファイル名がsample.pdfになる -->
<a href="./pdf/sample.pdf" download>クリックでダウンロード</a>上記の例のように、download属性の値を空にする、もしくは値を指定しない場合は、ファイルが持つ本来の名前でダウンロードされます。
この場合ファイル名はsample.pdfなので、そのままの名前が保持されますね。
aタグのdownload属性を使用する上での注意点
aタグのdownload属性を使用するにあたって、いくつか注意すべき点を説明しておきます。
同一オリジンのURL以外ではダウンロードできない
download属性でダウンロード可能なのは、同一オリジンの場合のみです。
そのため、外部のサイトのファイルをダウンロードさせることはできません。
<a>: アンカー要素 – HTML: HyperText Markup Language | MDN
downloadは同一オリジンのURLと、blob:,data:の各スキームでのみ動作します。
ダウンロードリンクを設置する場合は、必ず自身のサイトのリソースを使用しましょう。
IEなど一部未対応のブラウザがある
download属性の現在のブラウザ対応状況は、以下の通りです。
見ていただければわかる通り、IEや古いバージョンのブラウザでは対応していませんね。
これら未対応のブラウザでは、ダウンロードの代わりにページ遷移でファイルを開くという仕様になっています。
もしファイル形式が画像やPDFファイルなら、右クリックから手動でダウンロード可能です。
もしIEでもdownloadを機能させたい場合は、今のところJavaScriptを併用するしかなさそうですね。
それに関してはこちらの記事で紹介されているので、ぜひ参考にしてみてください。
【まとめ】aタグのdownload属性でファイルのダウンロードリンクを作成可能！
以上、aタグのdownload属性を使用して、ダウンロードリンクを実装する方法を紹介しました。
自身のサイトでPDFや画像などのアセットを配布したいときは、ぜひこの方法を使用してみてください！
コメント