PDF出力ができない

Question

ボタンを押下した際にAjaxの通信でPDFをクライアントに返却し、ブラウザに表示させる、という処理を実装したいと考えています。
ただ、以下のような実装を試しましたが、期待値通りの結果になりませんでした。

検証環境
ブラウザ：chrome 76.0.3809.132

実装内容：JS上で明示的に別ウィンドウで開くように処理追加
結果：何も記載がないPDFが出力される

サーバーからの戻り値を見ると、XMLHttpRequest.responseTextにバイナリのようなデータが格納されているので、
クライアントにデータが返却されるところまでは正常に動作しているようです。

---サーバー側---

public void getPdf(@RequestParam String Code, @RequestParam String fileName, HttpServletResponse response) {
	response.setContentType("application/pdf;charset=UTF-8");
	response.setHeader("Content-Disposition", "inline;filename=" + fileName);

	byte[] fileData = null;
	InputStream in = null;
	ByteArrayOutputStream out = null;
	OutputStream outStream = null;
	
	try{
		// DBからBLOB形式のデータを取得する
		fileData = pdfFilesTable.getfileData().getOutFile();
		in = new ByteArrayInputStream(fileData);

		out = new ByteArrayOutputStream();
		int cnt;
		while ((cnt = in.read()) != -1) {
			out.write(cnt);
		}
		
		outStream = response.getOutputStream();
		outStream.write(out.toByteArray());
		
	}catch(Exception e){
		// log出力
	}finally{
		// ストリームを閉じる
	}
}

---クライアント側---

// ボタ押下時処理
function clickPdfButtom(propCd, fileName) {
	var param = {
		"Code": encodeURIComponent(Code),
		"fileName": encodeURIComponent(fileName)
	};
	getPdf(param);
}

// PDF取得処理
function getPdf(paramData){
	$ajax(
		"url/api/test1",
		paramData,
		null,
		function(XMLHttpRequest, textStatus, errorThrown){
			// ファイル名取得
			var disposition = XMLHttpRequest.getResponseHeader('Content-Disposition');
			var fileName = getFileName(disposition);

			// PDFファイルをダウンロードする
			var a = document.createElement('a');
			var file = new Blob([XMLHttpRequest.responseText], {type: 'application/pdf'});
			var url = URL.createObjectURL(file);
			a.href= url;
			a.download = fileName;
			a.click();
			
			// 別タブで開いてPDFファイルを表示する
			window.open(url);
		}
	);
}

※質問用に一部処理を端折って記載しているため、抜けているものがありましたら申し訳ありません。

Comments

[dodox86]

※回答未満ですのでコメントのみです。
2018年と古く、更にIEの話でもあるので参考程度ですが:
Internet Explorer で一部のサイトの PDF ファイルが表示されない
https://helpx.adobe.com/jp/acrobat/kb/pdf-files-dont-display-some.html

PDFをJavaScriptではなく、ただ普通にブラウズしたら正しく表示されるのであればサーバー側には問題なさそうですが、どちらもダメならサーバー側のContent-Type:その他のフィールド情報が足りないかまたはクライアント側のPDFビューアーの設定が関係している気がします。ChromeはContent-Typeなどの解釈、制御処理を自前で持っていそうなので、上記URLのIE関連の（レジストリ等）設定は関係無さそうです。（＜あくまで「気がする」程度、です）

[退会済みユーザー]

そもそもajaxでダウンロードする必要がある？

[Lhankor_Mhy]

new Blob([XMLHttpRequest.responseText]

を

new Blob([XMLHttpRequest.response]

にするとどうなりますか？
blobやArraybufferじゃなくて、テキストで読み込んでうまくいくのかな？と思います。
（もしかしたら、responseType とかを blob にする必要があるかもしれない）

[tarouYamadaGuma]

Lhankor_Mhyさん、ありがとうございます。

new Blob([XMLHttpRequest.response]に変更したところ、
XMLHttpRequest.responseがundifinedとなりました。
その結果、BLOBの変換でエラーとなってしまいました。

[Lhankor_Mhy]

あー、すみません、jqXHR は、XMLHttpRequest を継承してると思っていたのですが、継承していないメソッドもあるようです。

そうだとすると、jQuery では難しいかもしれないですね。
本物の XMLHttpRequest を使うか、fetch を使うかした方がいいと思います。

参考までに、私が作ったブックマークレットをご紹介しておきますね。
ページ内のPDFリンクをまとめて、ZIPにしてダウンロードさせるものです。
http://let.hatelabo.jp/Lhankor_Mhy/let/hLHX8qPqyax_

[Lhankor_Mhy]

ググったら、こんな記事が見つかりました。
https://qiita.com/yuma84/items/fefb95c1a10396070cd2

[tarouYamadaGuma]

dodox86さん
回答ありがとうございます。
ただ普通にブラウズした場合、正常に表示することができました！
そのため、JS側の制御の問題のようです。

[tarouYamadaGuma]

asahina1979 さん
回答ありがとうございます。
asahina1979さんのご指摘通り、そもそも非同期通信でする必要があるのかというところから仕様が揉め始めました汗

Answer 1

以下の実装で実現することができました。
※今回はサーバーに渡すときの値をkey-valueで渡すようにしました。また、サーバーの受け取り方も変えました。
本当は、サーバーのパラメータは変更したくなかったのですが。

	@RequestMapping(value = "/test1", method = RequestMethod.POST)
	@ResponseBody
	public void getPdf(HttpServletRequest request, HttpServletResponse response) throws IOException{
		
		// パラメータ取得
		String code = request.getParameter("Code");
		String fileName = request.getParameter("fileName");
		
		// ·エンコード形式を設定する (おそらく不要）
		response.setContentType("application/pdf;charset=UTF-8");
		// ↓コメントアウトしたが、どっちでもどっちでもよさげ
		// response.setHeader( "Content-Disposition", "inline;filename=" + fileName);
		
		
		byte[] fileData = null;
		// 以降、質問時と変更ないため、省略
	}

// ボタ押下時処理
function clickPdfButtom(propCd, fileName) {
    // ↓間違えた。（3/19更新箇所）
    // testPdf("Code="+ encodeURIComponent(Code) + "&fileName=" + encodeURIComponent(fileName));
    var param = "Code="+ encodeURIComponent(Code) + "&fileName=" + encodeURIComponent(fileName));
    getPdf(param);
}

// PDF取得処理
function getPdf(paramData){
	var previewWindow = window.open("", "preview");
	
	var xhr = new XMLHttpRequest();
    xhr.open('POST', './url/api/test1', true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    xhr.responseType = "blob";
    xhr.onload = function(res) {
        var url = URL.createObjectURL(this.response);
        previewWindow.location.href = url;
        document.getElementById("d1").innerHTML =
        '<embed type="application/pdf" src="' + url + '"></embed>';
      }

    xhr.send(param);
}