jQueryのAjax通信で、取得したデータを保存（ダウンロード）させたい

Question

前提・実現したいこと

「ダウンロード」ボタンをクリックした際に、その前後での「事前処理」および「事後処理」を実行したうえで、ファイルをダウンロードしたいのです。

発生している問題・エラーメッセージ

下記にHTMLとjQueryのソースがありますが、1つ目のjqueryでは「ダウンロードはできるが、事前処理／事後処理は行われない（すっ飛ばされる）」状態になります。

一方の2つ目のjqueryでは、「事前処理／事後処理はきっちり行われ、ダウンロードのデータも取得できるが、それを保存する手段が分からない」状態です。

該当のソースコード

<button type='button' class='btn btn-success download'
 data-url='＜ダウンロードを行うリンク＞'>ダウンロード</button>

//１　これだと「事前処理」「事後処理」がすっ飛ばされるが、ダウンロードは可能
$(document).on ("click", ".download", (event) => {
    ＜事前処理＞
    location.href = $(event.currentTarget).data ("url");
    ＜事後処理＞
});

//２　これだと「事前処理」「事後処理」は実行されるが、現状ではダウンロード不可
$(document).on ("click", ".download", (event) => {
    $.ajax({
        ＜事前処理＞
        url:  $(event.currentTarget).data ("url"),
        type:  'get',
        timeout: 10000,

        success: (content, textStatus, xhr) => {
            //このalertで、ダウンロードしたデータは確認済み
            alert (content);

            //恐らくここに、ダウンロードしたデータを保存する処理を記述？

            ＜事後処理＞
        }
    });
});

試したこと

2つ目のjQueryソースのコメントに記載した通り、Ajax通信で取得したデータはalertで表示できています。

これをどのようにしてクライアント側に保存（ダウンロード）させるか、もしご存じの方がいらっしゃったら是非ご教示いただけませんでしょうか。

補足情報（FW/ツールのバージョンなど）

jQuery 3.4.1

Comments

[m.ts10806]

サーバーサイドで作成からダウンロードまですれば良いのでは？

Answer 1

ajaxで取得したCSVファイルをダウンロードするコードです。参考にどうぞ。
（エラー処理は省きました）
後半部分if (window.navigator.msSaveBlob) {は
ブラウザによって自動的にダウンロードさせる方法が変わるために対応した部分です。

$.ajax({
    url:url,
    type:'POST',
    cache:false,
    dataType:'html',
}).done(function (data, textStatus, jqXhr) {
    // CSV データの用意
    var array_data = [];
    // 改行コードで分割
    var rows = data.split('\r\n');
    for (var i = 0; i < rows.length; i++) {
        // カンマで分割
        var columns = rows[i].split(",");
        var ary = [];
        for (var c = 0; c < columns.length; c++) {
            ary.push(columns[c]);
        }
        array_data.push(ary);
    }
    var csv_data = array_data.map(function (l) { return l.join(',') }).join('\r\n');

    // BOM の用意（文字化け対策）
    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    var blob = new Blob([bom, csv_data], { type: 'text/csv' });

    if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(blob, "download.csv");
        // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
        window.navigator.msSaveOrOpenBlob(blob, "keeplistlog.csv");
    } else {
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
        $("#download").attr('href', url);
        $("#download").text("ダウンロードが始まらない場合はここをクリック");
        $("#download")[0].click();
    }
})

Comments

[tetakaha759]

ご回答ありがとうございました。

こちらのコードを参考にさせていただきます。