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

実現したいこと

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

該当のソースコード

JavaScript

1function downloadPdf(obj) {2 let ua = getMobileOS();3 if(ua !== "Android" && ua !== "Other"){4 windowReference = window.open();5 }6 let sendData = {'key_number' : obj.getAttribute('data-value')};7 $.ajax({8 type: "POST",9 url: "phpパス", // POST先のURL10 data: sendData 11 })12 .done(function(res) {13 let json = JSON.parse(res); // ファイル名とbase64をphpから取得14 const fileName = json['fileName'];15 const pdf = json['pdf'];16 17 let mime_ctype = "application/pdf";18 let file = toBlob(pdf, mime_ctype);19 20 let url = URL.createObjectURL(blob);21 22 if(ua !== "Android" && ua !== "Other"){23 windowReference.location = url;24 }else{25 window.open(url, '_blank');26 }27 })28 .fail(function(jqXHR, status, err) {29 console.log(status, err);30 });31}32 33function toBlob(base64, mime_ctype) {34 let bin = atob(base64.replace(/^.*,/, ''));35 let buffer = new Uint8Array(bin.length);36 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);37 38 for (let i = 0; i < bin.length; i++) {39 buffer[i] = bin.charCodeAt(i);40 }41 let blob;42 // Blobを作成43 try {44 blob = new Blob([bom, buffer.buffer], {45 type: mime_ctype,46 });47 } catch (e) {48 return false;49 }50 return blob;51}52 53function getMobileOS(){54//iPhoneの場合55 if(navigator.userAgent.indexOf('iPhone') > 0){56 //iPhone用の処理57 return "iPhone";58//iPadの場合59 }else if(navigator.userAgent.indexOf('iPad') > 0){60 //iPad用の処理61 return "iPad";62//iPodの場合63 }else if(navigator.userAgent.indexOf('iPod') > 0){64 //iPod用の処理65 return "iPod";66//Androidの場合67 }else if(navigator.userAgent.indexOf('Android') > 0){68 //Android用の処理69 return "Android";70 }71 72 return "Other";73}

試したこと・調べたこと

上記の詳細・結果

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

補足

特になし

コメントを投稿

0 コメント