Help us understand the problem. What is going on with this article?

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();
})
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした