実現したいこと
ブラウザでPNG画像に対しるリンクをクリックした時に、ブラウザ内で表示するのではなく、「名前をつけて保存する」というウィンドウを表示させて保存させるようにしたい。
環境
- Windows10 (64bit版)
- Google Chrome (92.0.4515.131(Official Build) (64bit)
- FireFox (91.0.1)(64bit)
試したこと
Googleで検索していくつかの記事を読むと、<a>タグ内にdownload属性を記述すれば良い、と書かれています。そこで、下記のようなコードを記述しました。
html5
1<!DOCTYPE html> 2<html lang='ja'> 3<head> 4 <meta charset='utf-8'> 5 <title>test</title> 6</head> 7<body> 8 <p> 9 <a href="hoge.png" download="hoge.png">DOWNLOAD AS PNG</a> 10 </p> 11 <p> 12 <a href="hoge.png" download>DOWNLOAD AS PNG</a> 13 </p> 14</body> 15</html>
結果と質問
上記のように2つの方法で記述しましたが、どちらもブラウザに表示に画像が表示されてしまい、ダウンロードさせることができませんでした。他に設定する項目があるのでしょうか?おわかりの方、教えて下さい。