WebサイトでマニュアルのPDFやzipファイルなど、ユーザーにダウンロードさせたいファイルがある場面があります。今回はそんな時に簡単に使える、aタグのdownload属性を使用したダウンロードリンクを実装する方法を解説していきます。
aタグのdownload属性の使い方
ますはaタグのdownload属性の使い方についての解説です。
以下のコードをご覧ください。
<a href="/file/sample.pdf" download>クリックでダウンロード(PDF)</a>上記のように、aタグにdownload属性を追加する事で、通常のリンクからダウンロードリンクに変更する事ができます。href属性には通常のリンクと同じようにファイルへのパス(絶対パス・相対パスどちらでも可)を記述してください。
download属性でファイル名をリネームしてダウンロードさせる
以下のコードのように、先程のdownload属性にファイル名を指定すると、ファイル名をリネーム(変更)してダウンロードさせる事ができます。
<a href="/file/sample.pdf" download="サンプルPDF">クリックでダウンロード(PDF)</a>サーバーにアップロードするファイルはファイル名が英数字になりますので、ユーザーが分かりやすいようにファイル名をリネームしてダウンロードさせる事が可能です。
実際に上記のダウンロードリンクからファイルをダウンロードすると、ダウンロードしたPDFのファイル名が「サンプルPDF」となっているかと思います。
download属性が効かない場合の対応と注意点
aタグのdownload属性が効かない場合は以下の事を確認してみてください。
同一オリジンのURLかどうか
download属性でダウンロード可能なのは同一オリジンのURLのみとなります。そのため外部サイトのファイルをダウンロードさせる事は出来ません。
簡単に言えば、同じドメイン内での使用のみと思っていただいて大丈夫です。
ブラウザの設定によってはダウンロードされない
ユーザーの仕様しているブラウザのセキュリティの設定や拡張機能によってdownload属性を指定してもダウンロードされず、ブラウザ上でファイルが開かれる場合があります。
対応しているブラウザかどうか
IEや古いバージョンのブラウザには対応していません。
ブラウザの対応状況については、こちらで確認してみてください。
その他の注意点
その他の注意点として以下の事を確認してみてください。
- aタグの閉じ忘れがないかどうか
- href属性やdownload属性に指定しているファイルのパスが間違っていないかどうか
さいごに
いかがでしたでしょうか。
今回は、aタグでファイルをダウンロードさせる方法と効かない場合の注意点について解説しました。
PDFファイル以外でも、zipファイル・Wordファイル・Excelファイルなどで使用する機会もありますので、ぜひ覚えておいてください。
