JavaScriptでファイルのダウンロードが完了したかを検知する方法

jQueryのプラグインを用いた方法などは紹介されていますが、プラグインを用いない方法がなかったので紹介します。

仕組みの概要

ブラウザ側：ページを表示したときにダウンロード検知用のCookieを削除する
ブラウザ側：ボタンを押したときにsetIntervalで定期的にCookieの監視を開始
サーバー側：ファイルをダウンロードしたときにCookieを発行する
ブラウザ側：Cookieを検知したときにダウンロード完了ページに遷移する

（参考記事）javascriptでダウンロード終了を検知する｜くらげのChangeLog

JavaScriptのコード例

Nameに「downloaded」、valueに「yes」を設定してCookieを発行したときのソースコードです。

また、Cookie有無の監視は3秒ごとにしています。

idが「download」のボタンを押すことで動作します。

/* ダウンロードボタンを押した後から3秒ごとにCookieの有無を監視 */
document.getElementById("download").onclick = function () {
  const ObserveCookie = window.setInterval(function () {
    //データを1つずつに分ける
    var r = document.cookie.split(';');

    //cookie名と値に分ける
    r.forEach(function (value) {
      var content = value.split('=');
      var name = content[0];
      var value = content[1];

      if (name == "downloaded" && value == "yes") {
        // Cookieがある場合
        console.log("ダウンロード完了");
        location.href = "/downloaded"; // 別ページに遷移する
        window.clearInterval(ObserveCookie);
        DeleteCookie();
      } else {
        // Cookieがない場合
        console.log("Cookieなし");
      }
    })
  }, 3000)
}

/* Cookieを削除する関数の定義 */
function DeleteCookie() {
  var date = new Date(); //日付データを作成
  date.setTime(0); //1970年1月1日00:00:00の日付データをセット
  document.cookie = "downloaded=yes;expires=" + date.toGMTString(); //有効期限を過去にして書き込む
}