Javascriptでの非同期PDFファイル表示

Question

###実現したいこと
Javascriptで非同期処理にてPDFファイルをサーバ側で作成し、そのファイルをダウンロードまたはブラウザで直接開きたい。

###発生している問題
作成したファイルを何かしら（バイナリ？）などで受け取り、
コールバックで別ウィンドウにPDFを開きたいです。
尚、諸事情によりサーバのPDFファイルを直接開くことはできません。

###該当のソースコード
＜サーバ側＞.NET
' レスポンスオブジェクト
With response
response.ContentType = "application/octet-stream"
response.WriteFile(strFilePath)
response.End()
End With

＜Javascript＞
$.ajax({
url: './api/print',
type: 'POST',
headers: {
'Content-Type': 'application/json'
},
dataType: 'json',
data: JSON.stringify(datajson)
}).done(function(res) {
// ここでPDFを開きたいです。
})
.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});

###試したこと
GETでレスポンスを直接受け取れば、ブラウザに表示できましたが、
実装時にそれはできないです。

またJavascriptでファイルを扱うときに、サーバ側がどんな形式でファイルを返せばいいかも教えていただけると助かります。

表示するためにはどうしたらいいか、お分かりの方、教えて下さい。

###補足情報(言語/FW/ツール等のバージョンなど)
asp.NET MVC 4 (API)

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

実証してないけど、以下のようにすればできないかな。あとサーバー側で指定しているMIMETYPEはできれば'application/pdf'にしたほうがいいかと。(IE9以下非対応)

$.ajax({
    url: './api/print',
    data: postData, 
    success: function (res) {
        var blob = new Blob([res]);
        var pdfURL = window.URL.createObjectURL(blob);
        window.open(pdfURL, ~略
    }
});

Answer 2

'./api/print'にpostでJSON.stringify(datajson) を投げれば
pdfが返ってくるのであれば、そのままトレースしてformを
つくってsubmitすればいいだけでは？

ちなみにdataType: 'json'ではかえってくるデータがpdfの
バイナリですからつねにパースエラーになるのではないでしょうか？

#追記
turbgraphics200さんのを参考にするとこんな感じでxhrをダイレクトにやったほうが良い感じです

<script>
window.onload=function(){
  var datajson={a:1,b:2,c:"test"};
  var xhr = new XMLHttpRequest();
  xhr.open('POST', './api/print');
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    var blob = new Blob([this.response]);
    var pdfURL = window.URL.createObjectURL(blob);
    window.open(pdfURL, '_blank');
    console.log(this.response.byteLength);
  };
  xhr.send(myurlencode(datajson));
};
function myurlencode(data){
  var str="";
  for(var i in data){
    if(str!=="") str+="&";
    str+=i+"="+encodeURIComponent(data[i]);
  }
  return str;
}
</script>