【javascript】Ajaxを使って画像をダウンロードさせる方法

aタグのdownload属性を使えばダウンロードさせることができるけどIEには対応していないのでAjaxを使って実装したときの備忘録

aタグのdownload属性を使ってダウンロード

IE11とiOS以外はaタグのdownload属性を使えば簡単にダウンロードさせることができる

<a href="画像URL" download>ダウンロード</a>

名前を変えてダウンロードさせる場合は

<a href="画像URL" download="この名前でダウンロード">ダウンロード</a>

ってすれば「この名前でダウンロード.png」みたいな感じでdownloadさせることができる

Ajaxを使って画像をダウンロードさせる方法

aタグを使うとブラウザによって挙動がことなってややこしいからbuttonタグを使う

<button type="button" data-img="画像URL" data-name="画像ファイル名" class="download">画像をダウンロード</button>

<script>
jQuery(function($){
  $('.download').on('click', function (event) {
    const url = $(this).data("img");
    const name = $(this).data("name");
    // ↓ 拡張子取得
    const pos = url.lastIndexOf('.');
    // ↓ 例）「.jpg」「.png」
    const ext = url.slice(pos);
    // ダウンロード時の画像ファイル名
    const fileName = name + ext;

    function downloadImg() {
      // ↓ ajax通信するためのオブジェクト
      const ajax = new XMLHttpRequest();
      // ↓ 初期化して通信方法と通信先を登録
      ajax.open('GET', url);
      // ↓ サーバーからblob型のレスポンスを受け付けるよう設定
      ajax.responseType = 'blob';
      // ↓ サーバーにリクエストを送信
      ajax.send();
      // ↓ 読み込み完了後発火
      ajax.onloadend = function(event) {
        // ↓ 処理が成功して正常にレスポンスができていない時
        if (ajax.status !== 200) {
          return false;
        }
        // IEの場合
        if (window.navigator.msSaveOrOpenBlob) {
          // ↓ 画像をダウンロード(IE)
          window.navigator.msSaveOrOpenBlob(ajax.response, fileName);
          return false;
        // ↓ IE以外の場合
        } else {
          // ↓ buttonタグだとダウンロードできないのでaタグ作成(ソースコード上には追加されていない)
          const a = document.createElement( 'a' );
          // ↓ hrefにダウンロード用の画像URLを挿入
          a.href = window.URL.createObjectURL( new Blob( [ajax.response] ) );
          // ↓ ダウンロード時の画像ファイル名を挿入
          a.download = fileName;
          // ↓ ダウンロード
          a.click();
        }
      };
    }
    // ↓ 関数発火
    downloadImg();
  });
});
</script>

buttonタグを使うのでIE以外のブラウザではaタグを動的に作成してjavascript上でダウンロードさせてる
一応問題なく動くはず

今回ダウンロード時の画像ファイル名を任意のものにするために拡張子を取得するコードを書いているんだけど、「png?v=01234」みたいにクエリ文字列がついてる画像ファイルとかは今回のコードでは対応してない
以前作った備忘録あるのでそっち見て

jQueryのAjaxを使ってやるなら

調べてるとみんなjavascriptを使ってるんだけど、jQueryでのやり方もあったので参考リンク貼っとく
試してはない

msSaveBlobとmsSaveOrOpenBlob

IE10以上であればBlobオブジェクトをダウンロードする機能があるようで
メソッドとして2種類あった
msSaveBlob()、msSaveOrOpenBlob()
違いとしてはIEで画像をダウンロードするときに下に「画像を保存しますか？」ってポップアップがでるんだけどその項目が一つ増えるくらいの差みたい
参考記事貼っておくけどmsSaveOrOpenBlobを使っておけばいいとのこと