システム技術グループ N.I
Webアプリでファイルダウンロードと画面遷移とかを同時にしたいときのお話です
Webブラウザを通してHTTPでファイルをダウンロードさせる時なんかで
ダウンロード開始まで画面をロックしておきたいなどの要望は
それなりにあると思います
ですが通常のSubmitではファイルダウンロードのレスポンスを検知できません
ですのでJavascriptでAjaxによる通信でやっちゃいましょう
これならレスポンスの検知もできるので
画面をロック→ダウンロード開始のSubmit→ファイルダウンロードのレスポンス→画面ロック解除
ということも出来ますね
ダウンロード処理はこんな感じで
もし画面をロックしている等の場合はダウンロード開始のクリックイベント発火後に
ロック解除の処理を入れてあげればOKです
注意点としてはBlobオブジェクトはブラウザのメモリに乗るものなので
数GBのファイル（DVDイメージとか）をこの方式でやってしまうと
マシンスペックによりますがハングします……
200MBくらいまでならいけそうな気がしますが
想定ユーザーによりけりなので気をつけましょう
あとjQueryの＄.ajaxではこの方式は（ストレートには）できないようです
$.ajaxはバイナリをテキスト扱いするので……
BinaryTransport
という関数というかライブラリというかを使えばイケるようですが
今回はXMLHttpRequestを使用しました
この方式でファイルダウンロードを行えばダウンロード＋画面遷移や
ダウンロード＋別のサーバーサイド処理なんかも出来ちゃいますね
Ajax以外にも色々と手はありますが
UX的には一番キレイなんじゃないかなーと思いました
