Chrome,IEでAタグで画像をダウンロードする方法

Chrome,IEでAタグで画像をダウンロードする方法
1. 関連

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>

サンプル