Chrome,IEでAタグで画像をダウンロードする方法
Aタグにdownload属性っていうのがありまして（昨日知りました）これでAタグをクリックすると画像でもなんでもhrefで指定したリソースをダウンロードすることができます。
<a href="sample21.jpg" download="テスト画像.jpg"><img src="sample21.jpg" /></a>
上記はテスト画像.jpgというファイル名で画像がダウンロードされます。ファイル名をしていしないならdownloadとするだけでもOKです。
ただしdownload属性はIE11では画像が表示されるだけでダウンロードができません。IE11ってできないこと多すぎです。
ということで苦肉の策で以下のように書くとダウンロード可能なのですがIEのためにここまで書くのは阿保らしいです。
<script>
function aa() {
var xhr = new XMLHttpRequest();
xhr.open('GET', './sample21.jpg');
xhr.responseType = 'blob';
xhr.onloadend = function() {
if(xhr.status !== 200) return;
window.navigator.msSaveBlob(xhr.response, 'test.jpg');
}
xhr.send();
}
</script>
～
<button onClick='aa();'>画像ダウンロード</button>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント