ブラウザ上で何らかのファイルをダウンロードさせた際、ダウンロード完了のタイミングを検知する方法

ページ上でボタンをクリックすると画像やzipファイル等をダウンロードできるというシステムがあり、ダウンロード完了のタイミングを検知しJavaScriptでアラートを表示する等、何らかの処理を行いたいというケースがあった。以下にJavaScriptとjQueryでの対応方法をメモ。

対応方法

JavaScript

<button id="dl_btn">ダウンロード</button>
<script>
//ダウンロード対象のファイル
var dl_file = `test.pdf`;

document.getElementById(`dl_btn`).addEventListener(`click`, async () => {

    //バーがからファイルを取得
    const response = await fetch(dl_file);

    //取得した内容をblob(バイナリデータ)として読み込み
    const blob = await response.blob();

    //blobをブラウザ内で一時的に参照可能なURLに変換
    const url = URL.createObjectURL(blob);

    //aタグを生成し、ファイルをダウンロードさせる
    const a = document.createElement(`a`);
    a.href = url;
    a.download = dl_file;
    a.click();

    //blobのURLを破棄してメモリを解放
    URL.revokeObjectURL(url);

    //ダウンロード完了後にアラートを表示
    alert(`ダウンロード完了(JS版)`);
});
</script>

jQuery

<button id="dl_btn">ダウンロード</button>
<script>
//ダウンロード対象のファイル
var dl_file = `test.pdf`;

$(function(){
    $(`#dl_btn`).on(`click`, function () {

        $.ajax({
            url: dl_file,
            method: `GET`,
            xhrFields: {
                //レスポンスをblob(バイナリデータ)に指定
                responseType: `blob`
            }
        })
        .done(function( blob ){

            //blobをブラウザ内で一時的に参照可能なURLに変換
            const url = URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.href = url;
            a.download = dl_file;
            a.click();

            //blobのURLを破棄してメモリを解放
            URL.revokeObjectURL(url);

            //ダウンロード完了後にアラートを表示
            alert(`ダウンロード完了(jQuery版)`);
        })
        .fail(function(){
            //エラー時の処理
        });
    });
});
</script>

リファレンス

blob

https://developer.mozilla.org/ja/docs/Web/API/Blob

createObjectURL

https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL_static

revokeObjectURL

https://developer.mozilla.org/ja/docs/Web/API/URL/revokeObjectURL_static