HTML | 画像のダウンロードボタンを設置する
HTMLで画像のダウンロードボタンを設置する方法とサンプルコードを紹介しています。
HTMLで画像のダウンロードボタンを設置する
HTMLで画像のダウンロードボタンを設置するにはリンクタグに「download」属性を指定します。
リンクタグのリンク先に画像ファイルを指定した場合、ユーザーはクリックまたはタップした際に、そのファイル名で画像をデバイスにダウンロードします。
<a href="https://1-notes.com/wp-content/uploads/2019/02/profile.png" download>
<button style="padding: 5px">画像をダウンロード</button>
</a>
ダウンロード時のファイル名を指定したURLのものと別のファイル名にしたい場合は「download」属性にダウンロードする際の名前として値を指定します。
以下のサンプルコードの場合、指定した画像は「image.png」という名前でダウンロードされます。
拡張子が必要な事に注意して下さい。
<a href="https://1-notes.com/wp-content/uploads/2019/02/profile.png" download="image.png">
<button style="padding: 5px">画像をダウンロード</button>
</a>