
JavaScriptでファイルを複数ダウンロードってどうやるのかな?
こんな疑問にお答えします。
- 本記事の内容
- JavaScriptでファイルを複数ダウンロードする方法
- 本記事の執筆者


- 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
- 物販月利50万円⇒脱サラ
- 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
- 物販は彼女と楽しみながらやっています!
今回は、JavaScriptでファイルを複数ダウンロードする方法を解説します。



すぐ読み終わるので、是非最後まで読んでみてください!
前提
僕が今回実験した環境は「IE11」になります。
ファイルを複数ダウンロードする方法
以下がソースコードになります。
/**
* 複数PDFファイルのダウンロードを行う
* ※ajaxではなくXMLHttpRequestを使用する
* ajaxを使用すると、ファイルの情報をバイナリではなくテキストとして取得してしまうため
*
* @param url URL
* @param param フォームパラメータ
* @param fileName ファイル名
* @return - なし
* @author K.Izumi
*/
function downloadMultipleFile(url, param, fileName) {
var xhr = new XMLHttpRequest();
//リクエスト初期化
xhr.open('POST', url, false);
//コンテンツタイプの指定
//※POST送信の場合、第2引数は固定
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//レスポンスタイプ指定
xhr.responseType = 'blob';
//受信成功時に呼び出される
xhr.onload = function (e) {
//ステータスコードが200(正常終了)の場合
if(this.status == 200) {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var pdf = this.response;
var blob = new Blob([bom, pdf], {type: 'text/pdf'});
//IE独自関数
window.navigator.msSaveBlob(blob, fileName);
}
};
//データ送信
xhr.send(param);
}
解説
ファイルの複数ダウンロードを実現するために一番効率の良い方法は「XMLHttpRequest」を使用する方法です。
理由は以下の通りです。
- 複数ファイルのダウンロードを行うには、クライアント側に処理を戻す必要がある。
- クライアント側に処理が戻る代表例としてajaxが存在するが、ajaxはファイル情報をテキストとして取得してしまう(バイナリで取得する必要あり)。
- 単純にajaxを使用するだけでは、ファイルダウンロード後に表示される黄色のバーが表示されない(クライアント側でダウンロード処理を書かなくてはならない)。
- ③の理由から、クライアント側にファイルのバイナリ情報を渡す必要があり、②の理由からajaxは使用できないわけではないが面倒になる。
「XMLHttpRequest」はajaxの組み込みモジュールのため、挙動としてはajaxと何ら変わりません。
ただし、少しコーディング方法は変わってきます。
xhr.responseType = 'blob';
23行目のコンテンツタイプは、ファイルのバイナリ情報を取得するため「blob」となります。
var blob = new Blob([bom, pdf], {type: 'text/pdf'});
今回はサーバ側からPDFの情報を取得するため、32行目はPDFとしています。
window.navigator.msSaveBlob(blob, fileName);
③の問題を解決するために、今回はIEの独自関数を使用してファイルのダウンロードを行っています。
複数ファイルダウンロードの注意点


上記の処理を複数回呼び出すことで複数ファイルのダウンロードが可能となります。
よく見るファイルダウンロード後の黄色バーですが、複数ファイルダウンロードを行うと黄色のバーが上に重なったような状態で複数出ます。
これはブラウザの問題なのでどうしようもないですが、ファイル名を指定してあげれば分かりやすくはなります。
まとめ
今回は、JavaScriptでファイルを複数ダウンロードする方法を解説しました。
ファイルのダウンロード処理はブラウザ等の環境を考慮する必要がありますし、ajaxの仕様も理解しておかなくてはならないので少々厄介ですね。。
ではまた!
- 自由な生き方がしたいなら!
自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。
当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。
コメント