HTML | 画像のダウンロードボタンを設置する

HTML 画像,HTML

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>

HTML 画像,HTML

Posted by Yousuke.U