Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What is going on with this article?
@kenta8813

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

More than 1 year has passed since last update.

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();
})
47
Help us understand the problem. What is going on with this article?
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
kenta8813
大したこと書きません 自分用メモとして残していきます。 もし、誰かの役に立てば幸いです

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
47
Help us understand the problem. What is going on with this article?