JavaScript Blob変換でPDFファイル名が変になる

Question

実現したいこと

JavaScriptを起点として、PHP、APIを経由してのPDFファイルのダウンロード（別タブ表示）。
流れ

1. JavaScriptがAjaxでPHPにアクセス
2. PHPが別サーバAPIにアクセスしてPDFファイル取得
3. PHPはバイナリをbase64エンコードしてJsonでJavaScriptに返す
4. JavaScriptは取得したbase64をBlob変換して表示

発生している問題・分からないこと

PDFの表示までは行えているのですが、ファイル名が想定のものにならず変な形になります。
例）
想定：012345.pdf
結果：1d098396-c899-42a1-9c87-5824ba992a9b
※結果はファイル名が固定でも毎回値が変わってきます。

Blob変換方法の誤りなどあるのかもしれませんが、何が悪いのかが判断できずにいます。
ご教授お願いいたします。

該当のソースコード

function downloadPdf(obj) {
	let ua = getMobileOS();
	if(ua !== "Android" && ua !== "Other"){
		windowReference = window.open();
	}
	let sendData = {'key_number' : obj.getAttribute('data-value')};
	$.ajax({
		type: "POST",
		url: "phpパス", // POST先のURL
		data: sendData
	})
		.done(function(res) {
			let json = JSON.parse(res); // ファイル名とbase64をphpから取得
			const fileName = json['fileName'];
			const pdf = json['pdf'];

			let mime_ctype = "application/pdf";
			let file = toBlob(pdf, mime_ctype);

			let url = URL.createObjectURL(blob);

			if(ua !== "Android" && ua !== "Other"){
				windowReference.location = url;
			}else{
				window.open(url, '_blank');
			}
		})
		.fail(function(jqXHR, status, err) {
			console.log(status, err);
		});
}

function toBlob(base64, mime_ctype) {
	let bin = atob(base64.replace(/^.*,/, ''));
	let buffer = new Uint8Array(bin.length);
	var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

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

function getMobileOS(){
//iPhoneの場合
	if(navigator.userAgent.indexOf('iPhone') > 0){
		//iPhone用の処理
		return "iPhone";
//iPadの場合
	}else if(navigator.userAgent.indexOf('iPad') > 0){
		//iPad用の処理
		return "iPad";
//iPodの場合
	}else if(navigator.userAgent.indexOf('iPod') > 0){
		//iPod用の処理
		return "iPod";
//Androidの場合
	}else if(navigator.userAgent.indexOf('Android') > 0){
		//Android用の処理
		return "Android";
	}

	return "Other";
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・aタグ作成してdownloadにファイル名設定とtargetに_blank設定でファイル指定、別タブ表示する方法は認識しております。
ただ、Mac Chromeではダウンロードのみで別タブ表示されない。
iPhone Safariで動いてくれないなどあったため、このaタグをやめました。
・toBlob関数では当初BOMを入れていなかったため、念の為new BlobにBOMを追加
・Blob→File→Blobとファイル名指定できるFileオブジェクトに変換をしてBlobに戻してみましたが、結果は同じでした。

補足

特になし

Comments

[Lhankor_Mhy]

createObjectURL を使う限りは無理ではないですかね……

> Generate a UUID [RFC4122] as a string and append it to result.
https://w3c.github.io/FileAPI/#unicodeBlobURL

Answer 1

結果：1d098396-c899-42a1-9c87-5824ba992a9b

URL.createObjectURL() で作成した URL は末尾がそのようなものになります。このURLを変更する手段は存在しないと思います。クライアント側で唯一できることは <a download=...> でダウンロード時のファイル名を指定することです。

クライアントに base64 されたデータを送ってからデコードしてダウンロードさせるという構成が奇妙に感じます。サーバから生のデータと Content-Disposition ヘッダを返すのが素直な設計かと。

Answer 2

ソースの意図がよくわかりませんが、ajaxでおくってPHPでそのまま出力してダウンロード処理をしたいということですか？ダウンロードさせるならajaxではなく普通にサブミットしないとおかしくないですか？

＃ 確認
まずはこれでダウンロードできるかどうか確認してください

<a href="data:image/gif;base64,R0lGODdhEAAQAIACAAUFBfr6+iwAAAAAEAAQAAACJoyPqcsIrV6QE1hbscSGzl4dXJiJ1HM66ua1nPclG9ixNgzl+s4XADs=" download="test.gif">test.gif</a>

これでダウンロードできないならXHRでのダウンロードはむずかしいです
PHPで文字列化して取得してバイナリで表示するくらいなら最初からPHPの結果をhttpヘッダをつけて呼び出せばダウンロードされるんですけどね

Comments

[JanTh1989]

実現したいことに記載した以下が目的になります。
「JavaScriptを起点として、PHP、APIを経由してのPDFファイルのダウンロード」

「ダウンロードさせるならajaxではなく普通にサブミットしないとおかしくないですか？」
ここの意図を汲み取れず申し訳ありません。
方法が根本的に間違っているということでしょうか？

[yambejp]

仮にPHPでダウンロード画面をだすなら
multipart/form-dataなformでファイルをsubmitすることにより戻りがダウンロードとして取得できるということです、ajaxでおくる必要はありません