ajaxでファイルをダウンロードさせようとした

PDFをダウンロードさせる処理を作っていて、ajaxでの実装をしたかった。
諸先輩方には常識だと思うのですが、なかなかつまずいたのでメモする。

普通にありがちなjQueryのajaxでやってみた

		$(document).on("click", ".Pdf", function () {
			Url = "url/to/api"
			target = $(this).data("document_id")
			Data = {
				"target_id": target
			}
			$.ajax({
				url: Url,
				type: "GET",
				data: Data,
				timeout: 10000,
			}).done(function (data) {

			}).fail(function () {
				alert("ERROR")
			})
		})

諸先輩方ならすぐにお分かりかと思うが、これでは動かない。

いろいろ調べたところ・・・

・取得したファイルからBlobオブジェクトを作成
・そのオブジェクトに対するリンクを生成
・そのリンクをaタグに張ってクリックイベントを発火させる

という処理にすれば可能とのこと。

やってみた

以下のコードはjQueryを使わずに記述している。
ほんとはできるそうなのだが、自分でjQueryを使って実装してみたら
うまくBlobオブジェクトが作れなかったのでjavascriptのみで実装した。

$(document).on("click", ".createPdf", function () {
    var url = "url/to/api"
    var fileName = "test"
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob'; //blob型のレスポンスを受け付ける
    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = this.response;//レスポンス
            //IEとその他で処理の切り分け
            if (navigator.appVersion.toString().indexOf('.NET') > 0) {
                //IE 10+
                window.navigator.msSaveBlob(blob, fileName + ".pdf");
            } else {
                //aタグの生成
                var a = document.createElement("a");
                //レスポンスからBlobオブジェクト＆URLの生成
                var blobUrl = window.URL.createObjectURL(new Blob([blob], {
                    type: blob.type
                }));
                //上で生成したaタグをアペンド
                document.body.appendChild(a);
                a.style = "display: none";
                //BlobオブジェクトURLをセット
                a.href = blobUrl;
                //ダウンロードさせるファイル名の生成
                a.download = fileName + ".pdf";
                //クリックイベント発火
                a.click();
            }
        }
    };
    xhr.send();
})