仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

【JavaScript】ファイルを複数ダウンロードする方法!

  • URLをコピーしました!
悩んでいる男の子

JavaScriptでファイルを複数ダウンロードってどうやるのかな?

こんな疑問にお答えします。

  • 本記事の内容
  • JavaScriptでファイルを複数ダウンロードする方法
  • 本記事の執筆者
いずみん(@izumin_0401)

今回は、JavaScriptでファイルを複数ダウンロードする方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

前提

僕が今回実験した環境は「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」を使用する方法です。

理由は以下の通りです。

  1. 複数ファイルのダウンロードを行うには、クライアント側に処理を戻す必要がある。
  2. クライアント側に処理が戻る代表例としてajaxが存在するが、ajaxはファイル情報をテキストとして取得してしまう(バイナリで取得する必要あり)。
  3. 単純にajaxを使用するだけでは、ファイルダウンロード後に表示される黄色のバーが表示されない(クライアント側でダウンロード処理を書かなくてはならない)。
  4. ③の理由から、クライアント側にファイルのバイナリ情報を渡す必要があり、②の理由から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の仕様も理解しておかなくてはならないので少々厄介ですね。。

ではまた!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!
目次