Content-Disposition ヘッダのファイル保存命令の実験

実験のコーナーです。
WEB+DB PRESS を読んで、気になったことを試してみる。

作者: 大沢和宏,高橋征義,山本陽平,高塚遙,高林哲,小飼弾,はまちや2,角田直行,田淵純一,伊野友紀,鈴木啓修,古谷洛人,伊藤直也,田中哲,太田一樹,松田明,鶴岡直也,佐藤竜一,cho45(さとう),吉田俊明,福島克輝,渡部広志,矢作浩,森田創,縣俊貴,大塚知洋,武者晶紀,ミック,下岡秀幸,nanto_vi,田中洋一郎,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2008/12/22
メディア: 大型本
購入: 4人クリック: 32回
この商品を含むブログ (30件) を見る

気になったのは、以下のヘッダをレスポンスに含めることで、ブラウザに対して結果を表示するのではなくファイルに保存させるというはなしについて。

Content-Disposition: attachment; filename="foo.txt"

じゃあ、試してみようってことで、まず、こんなファイルをサーバ上に配置。

<%
response.addHeader("Content-Disposition", "attachment;filename=\"file1.txt\"");
%><%="This is file1.txt"%>

そして、IE 7、Firefox 3.0.5、Safari 3.2.1、Opera 9.6.3 の各ブラウザから、このファイルの URL に直接アクセスしてみる。
ちなみに環境は Windows Vista、サーバーは Tomcat 6 を使用、なのでファイルは JSP として作成した。

予想される結果は、「This is file1.txt」と内容に一行書かれた、file1.txt という名前のファイルが保存できること。

実行すると、IE と FF では予想のとおりの結果となった。
これに対して Safari では、file1.txt.html というファイル名になった。
そして Opera では、file1.htm というファイル名になった。
この二つは、表示される保存ダイアログで名前を変えてやれば好みの名前にすることはできるが、ヘッダで指定した名前とはデフォルトで異なるものになってしまった。

おしまい。
じゃない。
本当に気になったのは、このヘッダでブラウザがファイルを保存できるかではなくて、XMLHttpRequest を使ってファイルを保存できるかということ。
もっというと複数のファイルを同時にリクエストして保存できるかということ。

ということで、こんなファイルをサーバ上に用意してみた。
dl_service1.jsp

response.addHeader("Content-Disposition", "attachment;filename=\"file1.txt\"");
%><%="This is file1.txt"%>

dl_service2.jsp

response.addHeader("Content-Disposition", "attachment;filename=\"file2.txt\"");
%><%="This is file2.txt"%>

mult_file_dl_by_head.html

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
function callback(data) {
  document.body.innerHTML += "<br>" + data + "<br>complete";
}
function download() {
  $.get("dl_service1.jsp", callback);
  $.get("dl_service2.jsp", callback);
}
</script>
</head>
<body>
<input type="button" value="ダウンロード" onclick="download();">
</body>
</html>

３つめのファイルをブラウザから開いてボタンを押すと、XMLHttpRequest （ライブラリは jQuery を使用）が上の２つのファイルに GET リクエストを送る。
結果として２つのファイルが保存できるかもという淡い期待を抱いて実行。（そうなった場合に、コールバック関数は呼ばれるのかって疑問もあるけど）

結果は

残念。どのブラウザもコールバック関数が実行されておしまい。

Opera での結果

複数ファイルの保存どころか、ファイル一つをリクエストするように書き換えて試してみても同様の結果だった。

やるせない気持ちで仕方なくグーグル検索してみたら、複数ファイルの同時保存を別の方法で 634 さんがやってた。
http://634.ayumu-baby.com/javascript/js_multi_file_download.html
あ〜なるほど。そんな手があったのね。ってことで試してみた。
試した結果は、次のエントリで。