PHPを経由してAPIからZIPファイルを取得し、JSでダウンロードするとZIP解凍ができない

Question

APIを実行し、APIからZIPファイルを取得して、返却するというPHPを作っています。
これをJavaScriptにてAjaxでPHPを実行するようにしています。
PHPから返却されたデータは、BlobにしてJavaScriptでダウンロードさせているのですが、ダウンロードしたZIPファイルが解凍できずにおります。

Blob変換誤りなど調査はしているのですが、行き詰まっておりまして、ご教授願いたく思います。

	//ダウンロードボタンが押された時に
	function download() {
		var sendData = getSelectType();
		$.ajax({
			type: "POST",
			url: "/api_get_certificate.html", // POST先のURL
			dataTypa: "json",
			data: sendData
		})
		.done(function(res) {
			var json = JSON.parse(res);
			const fileName = json['fileName'];
			const zip = json['zip'];

			var mime_ctype = "application/zip";
			var file = toBlob(zip, mime_ctype);

			if( window.navigator.msSaveOrOpenBlob ) {
				// IE
				navigator.msSaveBlob(file, fileName);
			} else {
				const dlBtn = document.createElement('a')
				dlBtn.download = fileName;
				dlBtn.href = URL.createObjectURL(file);
				dlBtn.click();
			}
		})
		.fail(function(jqXHR, status, err) {
			console.log(status, err);
		});
	};

	function toBlob(base64, mime_ctype) {
		// 日本語の文字化けに対処するためBOMを作成する。
		var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

		var bin = atob(base64.replace(/^.*,/, ''));
		var buffer = new Uint8Array(bin.length);
		for (var i = 0; i < bin.length; i++) {
			buffer[i] = bin.charCodeAt(i);
		}
		// Blobを作成
		try {
			var blob = new Blob([bom, buffer.buffer], {
				type: mime_ctype,
			});
		} catch (e) {
			return false;
		}
		return blob;
	}

	function getSelectType() {
		const typeList = ["Type1[]", "Type2[]"];
		let childData = [];
		for(let i = 0; i < typeList.length; i++){
			const tmp = document.getElementsByName(typeListList[i]);
			for (let j = 0; j < tmp.length; j++){
				childData.push({tmp[j].value);
			}
		}
		return {"inputData": childData};
	}

// ダウンロードAPI実行
$binary = ダウンロードAPI実行;

$result = array('fileName' => "sample.zip", 'zip' => base64_encode($binary));
echo(json_encode($result, JSON_UNESCAPED_UNICODE));

※AjaxのPOSTのパラメータは、API実行用のパラメータなだけです。
GETとPOSTで変わりないとは思っておりますが、POSTで実行しているため、名称各種は調整していますが、念の為コードに貼っております。

Comments

[Lhankor_Mhy]

ZIPファイルのblobにBOMをつけているようですが、これは必要な処理ですか？　この処理について参考にしたページなどを教えていただけますか？

[JanTh1989]

https://www.hos.co.jp/blog/20170213/

こちらを参考にしました。
参考ページではPDFのようなので、不要なのかもしれません。

[Lhankor_Mhy]

では、その部分を削除すれば動いたりしませんか？

なお個人的には、Base64形式のデータがあるのであれば、Date URI スキームを使った方が手っ取り早いのでは、などと思っています。

[Lhankor_Mhy]

あ、もしかしてIE10対応なんですかね？　それであれば仕方ないです。

[JanTh1989]

ご指摘通りに、Blobの引数からbomを消したら、無事に解凍できました。

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決の処理をお願いします。

[JanTh1989]

承知しました。

場所が場所のため、ベストアンサーをつけられず申し訳ありません。
非常に助かりました。
ありがとうございます。

Answer 1

Blob作成に、不要な日本語文字化け対応のUint8Arrayを入れなくしたところ、ZIP解凍が問題なく行えました。

function toBlob(base64, mime_ctype) {
	var bin = atob(base64.replace(/^.*,/, ''));
	var buffer = new Uint8Array(bin.length);

	for (var i = 0; i < bin.length; i++) {
		buffer[i] = bin.charCodeAt(i);
	}
	// Blobを作成
	try {
		var blob = new Blob([buffer.buffer], {
			type: mime_ctype,
		});
	} catch (e) {
		return false;
	}
	return blob;
}