.NET & Ajax：ファイルダウンロードのcallback設定を行う

既存のファイルダウンロード

コントローラーでFileを返して、location.hrefでファイルダウンロードを行う。

HomeController.cs

public ActionResult FileDownload()
{
    byte[] stream;
    string fileName;
    
    // 処理
    
    return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
}

location.href = 'http://myhome/Home/FileDownload';

上記のコードでサーバー側で作成したファイルをダウンロードすることは出来る。
でもファイルの作成時間が長くなると、ユーザーからみれば、今システムがファイルをダウンロード中なのか処理が失敗したのかをファイルが全て作成され、ローカルに保存されるまで気付けないので、ユーザーを不安にさせる可能性がある。
また、ダウンロードが失敗したと勘違いし、処理途中に別の行動に移る可能性もある。

ので、ファイルダウンロードの間はローディング画面を表示させ、ファイルがダウンロードされたらそれを消す処理がしたい。

⇒ ファイルダウンロードの際にCallback処理がしたい！

ってなりました。
以下、ファイルダウンロードのcallback設定の手順です。

１、jquery.fileDownloadを導入する

johnculviner.com

ダウンロードはこちら

https://github.com/johnculviner/jquery.fileDownload/tree/master/src/Scripts

「jquery.fileDownload.js」だけでOK

２、Javascript

// ローディング画面表示処理
$.fileDownload('http://myhome/Home/FileDownload', {
    successCallback: function (url) {
        // ローディング画面非表示処理
    },
    failCallback: function (html, url) {
        // 失敗したときの処理
    }
});

３、Controller

jquery.fileDownloadのCallbackには以下のResponseヘッダーの設定が必要。ファイルダウンロード時のレスポンスを確認し、以下のどれかがない場合は設定する。今回の場合は「Set-Cookie」の追加設定だけでCallback処理が出来た。

Content-Disposition: attachment; filename=Report0.pdf
Set-Cookie: fileDownload=true; path=/

HomeController.cs

public ActionResult FileDownload()
{
    byte[] stream;
    string fileName;
    
    // 処理

    // Set-Cookieを設定
    Response.AppendHeader("Set-Cookie", "fileDownload=true; path=/");

    return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
}

以上

参考用jquery.fileDownloadデモサイト

jquery.fileDownload.js Demo

IT業界のすみっこ暮らし

ふと気がついたときの記録